重新安排twitter bootstrap div以折叠到不同的顺序

时间:2015-02-16 11:07:57

标签: html css twitter-bootstrap

我有三个div,类=" col-md-4 col-xs-6",class =" col-md-4 col-xs-12",class = " col-md-4 col-xs-6"
它在中等屏幕视图中折叠成一行:
    

    div 1 | div 2 | div 3 
将其调整为xs:
后     
    div 1 (xs 6) 
div 2 (xs 12)
div 3 (xs 6)

我怎么能像这样摆脱这个崩溃:
    

    div 1 (xs 6) | div 3 (xs 6) 
div 2 (xs 12)

我想我可以在xs视图中隐藏div 3并制作div 3的副本,将它放在div 1之后,这将变为可见。但是没有任何出版方式吗?

2 个答案:

答案 0 :(得分:1)

我自己发现了如何做到这一点。继承了我的解决方案:

<div class="col-md-4 col-xs-6">1</div>
<div class="col-md-4 col-xs-12">2</div>
<div class="col-md-4 col-xs-6">3</div>

重写为:

<div class="col-md-4 col-xs-6">1</div>
<div class="col-md-4 col-xs-6 pull-right">3</div>
<div class="col-md-4 col-xs-12">2</div>

http://jsfiddle.net/tkgfzzx4/10/

答案 1 :(得分:0)

<div class="col-md-4 col-xs-6 order-1 order-md-1">1</div>
<div class="col-md-4 col-xs-12 order-3 order-md-2">2</div>
<div class="col-md-4 col-xs-6 order-2 order-md-3 ">3</div>

使用最新版本的bootstrap尝试此操作。