twitter-bootstrap Bootstrap：如何更改流体行中 div 的顺序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12902555/
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: How to change the order of div in fluid-row?
提问by mrto2
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:
如果我们在下一页举一个 bootstrap 的流体示例：
http://twitter.github.com/bootstrap/examples/fluid.html
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?
他们在左侧有一个流畅的行的侧边栏，然后在同一行中有一个英雄单位。然后是下一行的一些内容。当我们切换到移动视图/较小的屏幕时，它以相同的顺序出现。但是我们怎么能改变这个顺序。即如何在页面顶部显示侧边栏和英雄单元？
回答by George Filippakos
The new version of Bootstrap v3 now supports column ordering:
Bootstrap v3 的新版本现在支持列排序：
Column ordering
列排序
Easily change the order of our built-in grid columns with .col-push-* and .col-pull-*modifier classes.
使用.col-push-* and .col-pull-*修饰符类轻松更改我们内置网格列的顺序。
<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
回答by Sherbrow
You have to keep in mind that the grid doesn't support this by default, but there are ways to deal with that.
您必须记住，默认情况下网格不支持此功能，但有一些方法可以解决此问题。
You could for example inverse both spans (set the order of the mobile view) and force the normal positioning with floating :
例如，您可以反转两个跨度（设置移动视图的顺序）并使用浮动强制正常定位：
<div class="row-fluid">
<div class="span9 pull-right">
<!-- ... -->
</div><!--/span-->
<div class="span3 pull-left">
<!-- ... -->
</div><!--/span-->
</div><!--/row-->
Then, .spanelements are more or less modified correctly for smaller screens, but you still have a few rules to fix this behavior :
然后，.span对于较小的屏幕，元素或多或少会被正确修改，但您仍然有一些规则来修复此行为：
.row-fluid .pull-left[class*="span"]:last-child { margin-left: 0; }
@media (max-width: 767px) {
.row-fluid .pull-right[class*="span"] { float: none; }
}
If you use more than two columns, you will have to inverse margin of .pull-rightelements (except the last one) - something like :
如果您使用两列以上，则必须反转.pull-right元素的边距（最后一列除外）-例如：
.row-fluid .pull-right[class*="span"] { margin-right: 2.5641%;margin-left: 0; }
.row-fluid .pull-right[class*="span"]:first-child { margin-right: 0; }
Live demo (jsfiddle)and fullscreen(some styles must be set between normal and responsive, hence the jsfiddle "hack" in the style panel)
现场演示（jsfiddle）和全屏（某些样式必须设置在正常和响应之间，因此样式面板中的 jsfiddle “hack”）
回答by user956584
#wrapper {
display: flex;
display:-webkit-flex;
flex-direction: column;
-webkit-flex-direction:column;
}
#wrapper > div {
width: 100%;
}
#header {
order: 1;
-webkit-order: 1;
}
#mainMenu {
order: 2;
-webkit-order:2;
}
#content {
order: 3;
-webkit-order:3;
}
#sidebar {
order: 4;
-webkit-order:4;
}
Source: http://www.reddit.com/r/css/comments/1v1gv7/change_order_of_divs_with_css/
来源：http: //www.reddit.com/r/css/comments/1v1gv7/change_order_of_divs_with_css/
回答by hexist
If you want your side bar under your hero but above other things, that's going to take some dom manipulation since it's not simply a matter of putting the list before/after everything, but rather in between elements. Something like this should work:
如果您希望侧边栏位于英雄下方但高于其他内容，则需要进行一些 dom 操作，因为这不仅仅是将列表放在所有内容之前/之后的问题，而是放在元素之间。这样的事情应该工作：
$(window).resize(function () {
if ($(window).width() < 480) {
$("#sidebar").insertAfter($("#hero"));
} else {
$("#sidebar").prepend($("#containingrow"));
}
});
回答by rb-
I'm working on a plugin for sorting and adding elements to Bootstrap grids. It's very rough and fragile at the moment, but if only used for basic functions I believe it would survive a production environment.
我正在开发一个插件，用于对 Bootstrap 网格进行排序和添加元素。目前它非常粗糙和脆弱，但如果仅用于基本功能，我相信它会在生产环境中幸存下来。
The plugin requires that grids be consistent, all a particular width of span, but it might help with this.
该插件要求网格是一致的，所有的跨度都是特定的宽度，但它可能对此有所帮助。
It's best to do all this type of work before the markup renders, but I use Bootstrap in some cases where I cannot sort beforehand due to limitations of some template languages that I am forced to use.
最好在标记呈现之前完成所有此类工作，但在某些情况下，由于我被迫使用的某些模板语言的限制而无法预先排序，我会使用 Bootstrap。
回答by bvaldivielso
You can do it using media queries, a new possibilty offered by CSS3.
您可以使用媒体查询来实现，这是 CSS3 提供的一种新方法。
With media queries you could create styles that get only applied to certain types of screens for example. If you wanted to make that thing you're talking about you could to something like:
例如，通过媒体查询，您可以创建仅应用于某些类型屏幕的样式。如果你想制作你正在谈论的那件事，你可以像这样：
@media only screen and (max-device-width: 480px) {
.sidebar { width: 100%; bottom: 0%; blahblah: something; }
}
And that style would only be applied if the screen's width were less than 480px. This solution does not actually depend on bootstrap, but on CSS3.
只有当屏幕宽度小于 480 像素时，才会应用该样式。这个解决方案实际上并不依赖于引导程序，而是依赖于 CSS3。
By the way, if you included bootstrap.responsive.css (which is also given with bootstrap framework) your layout would automatically be made a one column layout, but maybe not in the order you wanted.
顺便说一下，如果你包含了 bootstrap.responsive.css（它也由 bootstrap 框架提供），你的布局将自动成为一列布局，但可能不是你想要的顺序。
