6-3
欄位排序
- 最常見的例子是三欄式畫面（左側邊+主內容+右側邊），在手機觀看，變成單欄式時，希望變成：（主內容→左側邊→右側邊）的順序。
- 利用
.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>
-
寫的時候，請依照在單欄式情況下，希望呈現的先後順序來寫，然後再利用 order 來調整位置。在三欄式時（未自適應前），就會按照 order 的順序來排，在單欄式時，就會忽略 order，依照語法順序來排。
-
範例：
See the Pen 欄位排序 by Tad (@tad0616) on CodePen.
6-2 BootStrap3 及 BootStrap4 的斷點比較
