:::

6-3 欄位排序

  1. 最常見的例子是三欄式畫面(左側邊+主內容+右側邊),在手機觀看,變成單欄式時,希望變成:(主內容→左側邊→右側邊)的順序。
  2. 利用 .order 就能調整:
    <div class="container">
      <div class="row">
        <div class="col-sm-7 order-sm-2">
          在中間的主內容區
        </div>
        <div class="col-sm order-sm-1">
          在左邊的側邊欄
        </div>
        <div class="col-sm order-sm-3">
          在右邊的側邊欄
        </div>
      </div>
    </div>
  3. 寫的時候,請依照在單欄式情況下,希望呈現的先後順序來寫,然後再利用 order 來調整位置。在三欄式時(未自適應前),就會按照 order 的順序來排,在單欄式時,就會忽略 order,依照語法順序來排。

  4. 範例:

    See the Pen 欄位排序 by Tad (@tad0616) on CodePen.

     


:::

書籍目錄

展開 | 闔起

快速登入


https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D941%26tbsn%3D32

計數器

今天: 5728572857285728
昨天: 2489248924892489
總計: 8027710802771080277108027710802771080277108027710