使用推/拉和col-md-12在Bootstrap 4中进行色谱柱排序

Question

col-md-12每个班级我都有两列.

在桌面视图中,它们应显示为:

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

在移动视图中,应显示如下:

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

甚至可以通过Bootstrap的列排序来实现这一点吗？

我目前的代码:

<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>

Answer 1

更新(2018年2月) - v4.0.0

现在已经发布了bootstrap,你可以使用order实用程序类来实现它,因为你可以在测试版中实现它(参见下面的旧更新),区别在于他们已经添加了这3个新类:

.order-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}

片段

.p-2 {
  background: red;
  border: white 5px solid
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-first order-lg-2">2</div>
</div>

旧版更新(2017年10月) - v4.0.0测试版

随着beta版的发布,你可以使用bootstrap中的flexbox实用程序来完成这项工作,例如flex-order

(请参阅@ZimSystem的回答 - 查看带有alpha版本的解决方案)

.p-2 {
  background: red;
  border: white 5px solid
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-1 order-lg-2">2</div>
</div>

Answer 2

更新2018 - Bootstrap 4.1.0

现在全宽,12个单位col-*-12列可以使用flexbox排序反转.

在较旧的Bootstrap 4 alpha和beta版本中,订购工具是flex-*......

<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>

演示Bootstrap 4 Alpha

从Bootstrap 4.0.0开始,订购工具是order-*......

<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>

演示Bootstrap 4.1.0

请参阅https://getbootstrap.com/docs/4.0/layout/grid/#order-classes上的文档