如何反转 Bootstrap 4 中的列顺序？答案

【问题标题】：How can I reverse the order of columns in Bootstrap 4?如何反转 Bootstrap 4 中的列顺序？
【发布时间】：2021-09-17 22:37:17
【问题描述】：

我有一个简单的场景：

<div class="row">
    <div class="col-md-12 col-lg-6 col-xl-7">A</div>
    <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

基本上如果md

A
B

我愿意，如果md

B
A

我尝试了许多在网络上发现的变体，例如 flex-first 等等……似乎无法让它工作

有什么想法吗？

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

如果您想更改md 和更大尺寸的订单，您可以使用order-md-，这是由bootstrap 提供的。看起来，如果您只想更改md 尺寸的订单，则必须在更大的尺寸Fiddle 上定义正常订单

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-12 order-md-2">A</div>
  <div class="col-md-12 order-md-1">B</div>
</div>

【讨论】：

@GM，你找到答案了吗？

【解决方案2】：

也可以使用flex- 帮助类来解决这个问题。此解决方案允许您在没有列上的订单计数的情况下反转订单。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex-column-reverse flex-lg-row">
  <div class="col-md-12 col-lg-6 col-xl-7">A</div>
  <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

flex-direction 现在默认反转 (md) 并将在 lg 断点处被覆盖。

【讨论】：

这正是我想要的！我正在用日语建立一个网站，我打算在大屏幕上采用传统的从右到左布局，然后在较小宽度的设备上将这些列推入行中（以另一种顺序，所以它仍然显示自上而下）。
需要注意的是也可以使用.flex-row-reverse
+1 应该是最佳答案..它不需要您在列之间更改任何内容，而只需修改一行..
对我来说，这打破了 bootstrap 5 中的响应性
问题标记为 bootstrap-4

【解决方案3】：

最简单的解决方案是：

.row{
    flex-direction: row-reverse;
}

【讨论】：

【解决方案4】：

对于 Bootstrap v4.1，您可以使用

<div class="row flex-row-reverse">
    <div class="col-md-12 col-lg-6 col-xl-7">A</div>
    <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

【讨论】：

【解决方案5】：

我知道这个问题是关于 Bootstrap 4 的，但我看到有人问如何在第 5 版中做到这一点。下面是示例：

<div class="col-md-6 order-2 order-md-1">
    <!-- YOUR CODE -->
</div>

<div class="col-md-6 order-1 order-md-2">
    <!-- YOUR CODE -->
</div>

参考：https://getbootstrap.com/docs/5.0/layout/columns/#order-classes

【讨论】：

【解决方案6】：

对于 Bootstrap 5，类名已更改为 order-x 其中 x 是顺序，即（直接来自文档）：

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

在https://getbootstrap.com/docs/5.0/layout/columns/#reordering查看更多信息

【讨论】：

【解决方案7】：

这对我有用：

<div class="col-md order-1">First column</div>
<div class="col-md order-md-1">Second column</div>

响应状态的输出：

Second column
First column

【讨论】：