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