Html 具有推/拉和col-md-12的引导4中的列排序

我有两列，每列都有类

col-md-12

在桌面视图中，它们应显示为：

Col **1** 
Col **2**

在移动视图中，应显示如下所示：

Col **2**
Col **1**

这在引导的列排序中是可能的吗

我当前的代码：

<div class="row">
    <div class="col-xs-push-12 col-md-12">
        Col 1
    </div>
    <div class="col-xs-pull-12 col-md-12">
        Col 2
    </div>
</div>

第1列
第2列

解决这个问题的一种方法是制作两个Col 2版本，一个在Col 1之上，一个在Col 1之下。然后使用相应的隐藏和显示

您可以使用

flexbox

，然后您可以使用媒体查询来更改顺序：

.row {
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;
}

或（手机和平板电脑上的默认顺序，桌面上的相反顺序）：

更新（2018年2月）-v4+ 现在，bootstrap已经发布，您可以像在beta版中一样使用实用程序类（参见下面的旧更新）来实现这一点，不同的是，它们添加了这3个新类：

。先订购{
-webkit盒序号组：0；
-ms弹性订单：-1；
顺序：-1；
}
.最后一个订单{
-webkit盒序数组：14；
-ms弹性订单：13；
订单：13份；
}
.订单-0{
-webkit盒序数组：1；
-ms弹性订单：0；
顺序：0；
}

---

一小条

.p-2{
背景：红色；
边框：白色5px实心
}

1.
2.

更新2021-Bootstrap 5 beta版

order-*

分类的工作方式相同

<div class="row">
        <div class="col-md-12">
            Col 1
        </div>
        <div class="col-md-12 order-first order-md-0">
            Col 2
        </div>
    </div>

从Bootstrap 4.0.0开始，排序UTIL是

order-*

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 flex-first flex-md-unordered">
        Col 2
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 order-first order-md-2">
        Col 2
    </div>
</div>

第1列
第2列

---

---

请参阅位于

的文档，您错过了基本列代码

col-xs-12仍然不起作用。。cols太左/右了：（那是因为它是100%宽度。看其他问题：嗯，看起来有点“脏”它有点脏，但当我们讨论全宽列时，它是一个更好的选择。如果您使用较小的网格，我们可以依靠
col-*-push-*
和
col-*-pull-*
来实现您想要的结果。如果您想对它着迷，可以使用jQuery并在
$（窗口）的第1列之前插入它.resize（）
handler.Thank，但我想在mobile和Desktop中使用不同的顺序我知道，你可以使用媒体查询，我会给你一个例子。如果没有关于der column OrderingHanks的解决方案，这可能是一个选项，但这不适用于全宽列，对吗？但它是并排的，而不是全宽的。这解决了你的问题吗？@dippas Good 10/2017更新-甚至没有意识到存在那些
order-x
实用程序，非常有用。这肯定是现在的首选答案，因为它不依赖任何外部CSS规则等。这现在需要是首选答案。@kevlarr和Routhinator嘿，伙计们，我刚刚用beta版本更新了上面的答案。@zimSystem beta版本已经允许您使用
order-
实用程序类，用十月更新和/或测试版的CSS检查我的答案，他们已经更新了这个实用程序；）都德。对于我们这些不经常使用Bootstrap的人来说，这是一个什么样的交易呢。为什么他们要改变名字。这是很痛苦的发现。谢谢你的来信。
<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 order-first order-md-2">
        Col 2
    </div>
</div>