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