如何对 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中文网其他相关文章！