问题描述
我想在台式机和移动设备上以不同的方式订购3列.目前,我的围裙看起来像这样:
I have 3 columns which I want to order in different ways on desktop and mobile.Currently, my gird looks like this:
<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>
在移动视图中,我想要以下输出:
In the mobile view I want to have the following output:
1-3-2
不幸的是,我不知道如何使用Bootstrap 4中的.col-md-push-*
和.col-md-pull-*
类来解决这个问题.
Unfortunately I don't get how to solve this with the .col-md-push-*
and .col-md-pull-*
classes in Bootstrap 4.
推荐答案
2018-使用最新的Bootstrap 4重新讨论此问题.
响应性排序类现在为order-first
,order-last
和order-0
-order-12
Bootstrap 4 push pull 类现在已成为push-{viewport}-{units}
和pull-{viewport}-{units}
类别,并且已删除了xs-
缀.要在移动设备/xs上获得所需的1-3-2布局,请执行以下操作: Bootstrap 4推拉演示 (仅适用于4.0之前的版本)
(This only works pre 4.0 beta)
Bootstrap 4.1 +
由于Bootstrap 4是flexbox,因此更改列顺序很容易.相对于父级.row
,cols可以从order-1
到order-12
排序,例如order-md-12 order-2
(最后一个md
,第二个xs
).
Since Bootstrap 4 is flexbox, it's easy to change the order of columns. The cols can be ordered from order-1
to order-12
, responsively such as order-md-12 order-2
(last on md
, 2nd on xs
) relative to the parent .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>
演示:使用order-*
类
Demo: Change order using order-*
classes
桌面(大屏幕):
移动设备(较小的屏幕):
Mobile (smaller screens):
还可以使用 flexbox方向工具更改列顺序. ..
It's also possible to change column order using the flexbox direction utils...
<div class="container">
<div class="row flex-column-reverse flex-md-row">
<div class="col-md-8">
2
</div>
<div class="col-md-4">
1st on mobile
</div>
</div>
</div>
演示: Bootstrap 4.1随Flexbox方向更改订单
旧版演示
演示-Alpha 6
演示-测试版(3)
Older version demos
demo - alpha 6
demo - beta (3)
相关:
Bootstrap 4中带有push/的列排序拉和col-md-12
Bootstrap 4列的更改顺序
Related:
Column ordering in Bootstrap 4 with push/pull and col-md-12
Bootstrap 4 change order of columns
A-C-B A-B-C
A-C-B A-B-C
这篇关于通过Bootstrap4订购列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!