我有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-*
类解决这个问题。
6条答案
按热度按时间b91juud31#
响应订购类现在为
order-first
、order-last
和order-0
-order-5
Demo
响应订购类现在为
order-first
、order-last
和order-0
-order-12
Bootstrap 4push****pull类现在是'push-{viewport}-{units}'和'pull-{viewport}-{units}',并且删除了'xs-'中缀。要在mobile/xs上获得所需的1 - 3 - 2布局,可以使用以下方法:[ Bootstrap 4推拉演示](http://www.codeply.com/go/OmrcmepbUp)(仅适用于4.0测试版之前的版本)
由于Bootstrap 4是Flexbox,因此很容易改变列的顺序。列可以从
order-1
到order-12
排序,例如order-md-12 order-2
(最后一个在md
上,第二个在xs
上)相对于父.row
。演示:Change order using
order-*
classes台式机(大屏幕):
移动设备(屏幕较小):
也可以使用flexbox direction实用程序更改列顺序...
演示:Bootstrap 4.1 Change Order with Flexbox Direction
demo - alpha 6
demo - beta (3)
See more Bootstrap 4.1+ ordering demos
Column ordering in Bootstrap 4 with push/pull and col-md-12
Bootstrap 4更改列的顺序
A-C-B A-B-C
carvr3hs2#
这也可以通过CSS“Order”属性和媒体查询来实现。
大概是这样的:
CodePen链接:https://codepen.io/preston206/pen/EwrXqm
kognpnkq3#
即使这样也能奏效:
tgabmvqs4#
我正在使用Bootstrap 3,所以我不知道是否有一个更简单的方法来做它Bootstrap 4,但这个CSS应该为您工作:
...并将类添加到第二列:
编辑:
哦...看起来我上面写的是一个.pull-xs-right类在Bootstrap 4:X中,只要把它添加到第二列,它就可以完美地工作了。
lb3vh1jj5#
由于列排序在Bootstrap 4测试版中不起作用(如上面重新访问的答案中提供的代码所述),因此您需要使用以下代码(如答案中提供的codeply 4 Flexbox顺序演示- alpha/beta链接所示)。
但是,请注意,“Flexbox order demo - beta”使用alpha代码库,将代码库更改为Beta(并运行它)会导致div错误地显示在一列中--但这看起来像是代码层问题,因为从代码层中剪切和粘贴代码的工作原理如上所述。
2w3kk1z56#
你可以做两个不同的容器一个与移动的订单和隐藏在桌面屏幕上,另一个与桌面订单和隐藏在移动屏幕上