如何在 Bootstrap 4 中重新排序列？

透過 Bootstrap4 對列進行排序

可以使用各種技術來實現 Bootstrap4 中的列重新排序，取決於要求和所使用的 Bootstrap 版本。

Bootstrap 4.1（目前版本）**

Bootstrap 4.1 引入了一組新的響應式排序類別：order-first、order-last 和 order-0 到 order-12。這些類別可以更靈活地控制不同螢幕尺寸上的列順序。

要在所需的移動視圖(1-3-2) 中對列進行排序，請使用以下程式碼：

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

Bootstrap 4（舊版）**

在Bootstrap 4 的早期版本（4.1 之前）中，push 和pull 類別用於控制列順序。然而，從 Bootstrap 4.0 beta 開始，這些類別已被棄用，並替換為 Push-{viewport}-{units} 和 pull-{viewport}-{units}。

Pre-4.0 Beta

使用4.0 之前的測試版實現所需的佈局(1-3-2)語法：

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

4.0 Beta及更高版本

對於Bootstrap 4.0 beta 及更高版本，應使用以下語法：

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

其他方法

Flexbox方向

在Bootstrap 4.1及更高版本中，也可以使用 flexbox 方向公用程式來變更列的順序。例如，以下程式碼將反轉移動螢幕上列的順序：

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

可折疊列

對列進行排序的另一個選項是使用可折疊列。這允許您根據螢幕尺寸隱藏或顯示列。使用折疊和顯示類別來實現可折疊列。

請參閱提供的程式碼範例和文檔，以了解有關透過 Bootstrap4 對列進行排序的更多詳細資訊和示範。

以上是如何在 Bootstrap 4 中重新排序列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！