我有3个列，我想在桌面和移动设备上以不同的方式订购。
目前，我的网格看起来像这样：
目前，我的网格看起来像这样：
<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"> 3 </div> </div>
在移动视图中，我希望具有以下顺序：
1-3-2
不幸的是，我不知道如何使用Bootstrap 4中的.col-md-push- *和.col-md-pull- *类来解决这个问题。
解决方法
使用最新的Bootstrap 4.0.0(稳定版)重新审视此问题。
响应式ordering classes现在是订单优先，订单最后和订单0 – 订单-12
Bootstrap 4推拉类现在是push- {viewport} – {units}和pull- {viewport} – {units}，并且xs-infix已被删除。在mobile / xs上获得所需的1-3-2布局将是：Bootstrap 4 push pull demo
由于Bootstrap 4是flexBox，因此很容易更改列的顺序。 cols可以从order-1到order-12进行排序，相应地，例如order-md-12 order-2(md上的最后一次，xs上的2nd，相对于父.row)。
<div class="container">
<div class="row">
<div class="col-3 col-md-6">
<div class="card card-body">1</div>
</div>
<div class="col-6 col-md-12 order-2 order-md-12">
<div class="card card-body">3</div>
</div>
<div class="col-3 col-md-6 order-3">
<div class="card card-body">2</div>
</div>
</div>
</div>
2018更新Bootstrap 4.0.0
Col ordering demo
旧版演示
demo – alpha 6
demo – beta (3)
See more Bootstrap 4.0.0 ordering demos
有关：
Column ordering in Bootstrap 4 with push/pull and col-md-12
Bootstrap 4 change order of columns
A-C-B A-B-C
