使用 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 类。这些类允许您更改不同屏幕尺寸上列的方向。例如，以下代码在移动屏幕上垂直排列列，在中型屏幕及更大屏幕上水平排列列：
示例：
<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>
以上是如何在 Bootstrap 4 中响应式地对列进行排序？的详细内容。更多信息请关注PHP中文网其他相关文章！
