使用 Bootstrap 3,我有一个非常简单的布局,例如:
<div class="container">
<div class="row">
<div class="col-sm-4">
Header Content Left
</div>
<div class="col-sm-4">
Header Content Middle
</div>
<div class="col-sm-4">
Header Content Right
</div>
</div>
</div>
在较小的设备上,与其按自然顺序堆叠,我希望它像这样堆叠:
Header Content Middle
Header Content Right
Header Content Left
我对如何实现这一目标感到困惑,任何人都可以指出正确的方向吗?
最佳答案
为了扩展 neilhem 的答案,push and pull修饰符就是您要找的。p>
来自文档:
Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.
基本上,这些修饰符的作用是根据您提供的偏移量推(向右移动)或拉(向左移动)列,其中起点基于列在行中的顺序。可以这样读:
/* column size direction offset */
.col -sm -push -4
因此对于您的示例,您需要类似的内容:
<div class="row">
<!--first column so start at 0 then push it to the right 4 -->
<div class="col-sm-4 col-sm-push-4">
Header Content Middle
</div>
<!-- start at 4 then push to the right 4 -->
<div class="col-sm-4 col-sm-push-4">
Header Content Right
</div>
<!-- start at 8 then pull to the left 8 -->
<div class="col-sm-4 col-sm-pull-8">
Header Content Left
</div>
</div>
以下是逐步发生的事情的直观分解:
重新排序前:
[ column 1 ][ column 2 ][ column 3 ]
将第一列推 4 个偏移量:
[ offset 4 ][ column 1-2 ][ column 3 ] ^ they are on top of each other at this point
将第二列推 4 个偏移量:
[ offset 4 ][ column 1 ][ column 2-3 ] ^ they are on top of each other at this point
将第三列拉出 8 个偏移量:
[ column 3 ][ column 1 ][ column 2 ] ^ column 3 falls into the open offset caused by column 1's push
关于html - 如何更改列的堆叠顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25671299/