Foundation-Flexグリッドソースの順序付け

説明

ソースの順序付けは、異なるサイズの画面で列を再配置するのに役立ちます。 _order_プロパティを使用して、列は行にソートされます。一番小さい番号が最初に配置されます。

例

次の例は、Foundationでの_Source Ordering_の使用を示しています-

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <title>Foundation Template</title>
      <link rel = "stylesheet" href = "css/foundation.css"/>

      <script src = "js/vendor/jquery.min.js"></script>
      <script src = "js/foundation.min.js"></script>
   </head>

   <body>
      <h2>Example of Flex Grid</h2>

      <div class = "row">
         <div class = "column order-1 medium-order-2" style = "background-color:#8BD6EE;">
            Appears first on small screen
         </div>

         <div class = "column order-2 medium-order-1" style = "background-color:#7B68EE;">
            Appears second on small screen
         </div>
      </div>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

上記のHTMLコード flex_grid_source_orderingl ファイルを保存します。
このHTMLファイルをブラウザで開くと、次のように出力が表示されます。

Foundation-flex-grid-source-ordering

Foundation-Flexグリッドソースの順序付け

説明

例

出力

目次