twitter-bootstrap Bootstrap 6 列响应式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21875681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 6-column responsive
提问by user3292126
I'm using a Bootstrap layout for my design and am about to make it responsive and saving needed order. For example the such as this:
我正在为我的设计使用 Bootstrap 布局，并将使其具有响应性并保存所需的顺序。例如这样的：
<div class="row">
<div class="col-sm-4 col-md-2" >div1</div>
<div class="col-sm-4 col-md-2" >div2</div>
<div class="col-sm-4 col-md-2" >div3</div>
<div class="col-sm-4 col-md-2" >div4</div>
<div class="col-sm-4 col-md-2" >div5</div>
<div class="col-sm-4 col-md-2" >div6</div>
</div>
On md – viewports I'll get like this:
在 md – 视口上，我会得到这样的结果：
div1 div2 div3 div4 div5 div6
On sm- viewports:
在 sm- 视口上：
div1 div2 div3
div4 div5 div6
How could I reorder columns to get like this on sm-viewports:
我如何在 sm-viewports 上重新排序列以得到这样的结果：
div1 div3 div5
div2 div4 div6
In others words – every even columns have to go down, and every odd column have to stay up. Is it possible?
换句话说 - 每个偶数列都必须下降，每个奇数列必须保持上升。是否可以？
回答by James Donnelly
Simply introduce a new set of columns:
简单介绍一组新的列：
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div1</div>
<div class="col-sm-12 col-md-6" >div2</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div3</div>
<div class="col-sm-12 col-md-6" >div4</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div5</div>
<div class="col-sm-12 col-md-6" >div6</div>
</div>
</div>
</div>
回答by cvrebert
Using the col-*-push-Nand col-*-pull-Ncolumn ordering classesshould do the trick:
使用了col-*-push-N与col-*-pull-N列排序类应该做的伎俩：
<div class="row">
<div class="col-sm-4 col-md-2" >div1</div>
<div class="col-sm-4 col-md-2 col-md-push-2" >div3</div>
<div class="col-sm-4 col-md-2 col-md-push-6" >div5</div>
<div class="col-sm-4 col-md-2 col-md-pull-4" >div2</div>
<div class="col-sm-4 col-md-2 col-md-pull-4" >div4</div>
<div class="col-sm-4 col-md-2" >div6</div>
</div>
CodePen: http://codepen.io/anon/pen/eakfH
代码笔：http://codepen.io/anon/pen/eakfH
