如何在 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 之前，push 和 pull 类有格式化 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中文网其他相关文章！