基礎 - Flex Grid 源順序

上一個
下一個

描述

源順序有助於在不同尺寸的螢幕上重新排列列。使用 order 屬性，這些列按行排序，即：最小的數字安排在第一位。

示例

以下示例展示了在 Foundation 中使用 源順序 −

現場演示 
<!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_ordering.html 檔案。

  • 在瀏覽器中開啟這個 HTML 檔案，顯示的輸出如下。

foundation_flex_grid.htm
列印頁面
上一個
下一個
廣告