Bootstrap:如何更改流体行中 div 的顺序? [英] Bootstrap: How to change the order of div in fluid-row?

问题描述

如何在引导程序中重新排列/交换一些流体容器/行的顺序......

如果我们在下一页举一个 bootstrap 的流体示例:

http://twitter.github.com/bootstrap/examples/fluid.html>

他们在左侧有一个流畅的行的侧边栏，然后在同一行中有一个英雄单位.然后是下一行的一些内容.当我们切换到移动视图/较小的屏幕时，它以相同的顺序出现.但是我们怎么能改变这个顺序.即如何在页面顶部显示侧边栏和英雄单元?

解决方案

新版 Bootstrap v3 现在支持列排序:

列排序

使用 .col-push-* 和 .col-pull-* 修饰符类轻松更改我们内置网格列的顺序.

 
<div class="col-md-9 col-md-push-3">9</div><div class="col-md-3 col-md-pull-9">3</div>

将给出以下顺序:

 ----------------------------|3 |9 |-----------------------------

文档:http://getbootstrap.com/css/#grid-column-ordering

How to re-arrange/swap the order of some fluid container/row in bootstrap.....

If we take an example of bootstrap's fluid example on following page:

http://twitter.github.com/bootstrap/examples/fluid.html

They have sidebar on left in a fluid row and then a hero unit in same row. And then some content in next row. When we switch to mobile view/smaller screens, it appears in same sequence. But how can we change that order. i.e. how to show the sidebar at the end and hero unit on top of the page?

解决方案

The new version of Bootstrap v3 now supports column ordering:

Column ordering

Easily change the order of our built-in grid columns with .col-push-* and .col-pull-* modifier classes.

 <div class="row">
  <div class="col-md-9 col-md-push-3">9</div>
  <div class="col-md-3 col-md-pull-9">3</div>
</div>

Will give the following order:

 ----------------------------
|     3     |      9       |
----------------------------

Documentation: http://getbootstrap.com/css/#grid-column-ordering

这篇关于Bootstrap:如何更改流体行中 div 的顺序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！