如何對 Bootstrap 4 和 5 中的列重新排序？

使用Bootstrap 4 重新組織列

在Bootstrap 4 中，可以使用各種方法對列進行重新排序，取決於所所需的效果和螢幕尺寸.

對於Bootstrap 5 (2021)

從 Bootstrap 5 開始，響應式排序類別已更新為包含 order-first、order-last 和 order-0 到 order-5。這些類別使列排列更加靈活。

對於Bootstrap 4 (2018)

在Bootstrap 4 中，響應式排序類別包含order-first、order-last ，以及order-0 到order-12 。要在行動裝置上實現所需的1-3-2 佈局，應使用以下類別：

<div class="container">
  <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>
</div>

使用Flexbox 進行自訂

Bootstrap 支援Flexbox 4.1 及更高版本。這可以使用方向實用程式對列順序進行更多控制：

<div class="container">
  <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>
</div>

透過這些選項，Bootstrap 提供了足夠的靈活性，可以根據螢幕尺寸和所需佈局重新組織列。

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