如何在 Bootstrap 4 和 5 中有效地對列進行排序？

使用 Bootstrap 4 對列進行排序

在 Bootstrap 4 中，可以使用類別和 Flexbox 的組合來實現列排序。為了在行動裝置螢幕上獲得所需的1-3-2 佈局，我們將探索以下技術：

2021 - Bootstrap 5

Bootstrap 5 引入了新的類別響應式排序：order-first、order-last 和order-0 到order-5。這簡化了列排序，允許您為每個視窗大小設定所需的順序。

2018 - Bootstrap 4

Pre-4.0 Beta：

在Bootstrap 4.0 beta 之前，pushp.格式化push-{viewport}-{units} 和pull-{viewport}-{units} ，不含 xs- 中綴。為了在行動裝置上實現1-3-2 佈局，我們將使用以下類別：

<div class="col-3 col-md-6"></div>
<div class="col-6 col-md-12 push-xs-6 pull-xs-3"></div>
<div class="col-3 col-md-6 pull-xs-6"></div>

Bootstrap 4.1 及更高版本

Bootstrap 4.1 引入了flexbox，提供一種更直觀的列排序方式。響應式排序類別範圍從 order-1 到 order-12。透過設定這些類，我們可以指定列相對於其父級.row 的順序：

<div class="row">
  <div class="col-3 col-md-6 order-2 order-md-12">1</div>
  <div class="col-6 col-md-12 order-3">3</div>
  <div class="col-3 col-md-6 order-1">2</div>
</div>

使用Flexbox Direction 更改順序

除了排序類之外, Bootstrap 4.1 也允許使用Flexbox 方向實用程式反轉列順序：

<div class="row flex-column-reverse flex-md-row">
  <div class="col-md-8">1st on mobile</div>
  <div class="col-md-4">2</div>
</div>

以上是如何在 Bootstrap 4 和 5 中有效地對列進行排序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！