如何在 Bootstrap 4 中響應式地對列進行排序？

使用Bootstrap 4 對列進行排序

重新排序列 Bootstrap 4 提供了跨不同螢幕尺寸對列進行排序的簡化機制。本文探討了實現此目的的各種方法。

Bootstrap 4.1

隨著 Bootstrap 4.1 引入 Flexbox，列排序變得更簡單。 order 實用程式類別現在允許您指定所需的列順序，範圍從 order-1 到 order-12。響應式排序可以透過組合這些類別來實現，例如order-md-12 order-2，它將列在中型螢幕（XXL、XL、LG、MD）上定位為最後，在超小螢幕（XS）上定位為第二。

範例：

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

引導程式4

在Bootstrap 4.1 之前，列排序依賴於推類和拉類。這些類別在 Bootstrap 4 中進行了修改，並遵循語法：push-{viewport}-{units} 和 pull-{viewport}-{units}。為了在移動/超小螢幕上實現所需的1-3-2 佈局，將使用以下類別：

範例：

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

注意：

此方法在Bootstrap 4.1中已棄用.

Flexbox 方向實用程式

除了順序實用程式之外，Bootstrap 4.1 還提供了flex-column-reverse 和flex-md-row類。這些類別可讓您變更不同螢幕尺寸上列的方向。例如，以下程式碼在移動螢幕上垂直排列列，在中型螢幕及更大螢幕上水平排列列：

範例：

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