如何更改Bootstrap 3 div列顺序

时间:2015-01-15 11:04:34

标签: html css twitter-bootstrap

做我的第一个响应式设计,并且在bootstrap中可能是这样的.3。在lg:

上更改
[a] [     ]
[b] [  c  ]
    [     ]

到sm:

[a]
[c]
[b]

3 个答案:

答案 0 :(得分:0)

你可以使用两个div。一种用于第一种类型的布置,另一种用于第二种类型的布置。第一个只显示在lg中,最后一个只显示在sm中。

<div class="hidden-sm">

</div>

<div class="hidden-lg">

</div>

答案 1 :(得分:0)

在HTML标记中,将[c]放在[a]和[b]之间。添加课程&#39;左拉&#39;到a和b。添加课程&#39; pull-right&#39;到c。最后,将它们包含在定义断点的div中,例如class =&#39; col-sm-12 col-md-12&#39;。

答案 2 :(得分:0)

您可以在移动设备上的C列... A-C-B上使用pull-right

<div class="row">
     <div class="a col-lg-6">
        A
     </div>
     <div class="c col-lg-6 pull-right">
        B
     </div>
     <div class="b col-lg-6">
        C
     </div>
</div>

演示http://bootply.com/9UNb9Q37G0