twitter-bootstrap 使用 Twitter Bootstrap 响应式地重新排序 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18514922/
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
Reordering divs responsively with Twitter Bootstrap?
提问by Richard
I am working with Twitter Bootstrap v3and want to reorder elements responsively, using column orderingand offsetting.
我正在使用Twitter Bootstrap v3，并希望使用column ordering和offsetting以响应方式重新排序元素 。
This is how I would like to use my elements. At -xsor -smbreakpoints, with the containing div stacked 4 to a row:
这就是我想使用我的元素的方式。在-xs或-sm断点处，包含 div 堆叠 4 到一行：
At -mdor -lgbreakpoints, with the containing div stacked 2 to a row:
在-md或-lg断点处，包含 div 堆叠 2 到一行：
This is the current code - I know how to set the classes on the containing div, but not on A, B and C:
这是当前的代码 - 我知道如何在包含的 div 上设置类，但不知道如何在 A、B 和 C 上设置类：
<div class="row">
<div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3">
<div class="row">
<div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div>
<div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div>
<div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div>
</div>
</div>
... more containing divs...
</div>
I can't figure out how to get A, B and C in the right order with Bootstrap 3's column orderingand offsetting. Is it actually possible?
我无法弄清楚如何获得A，B和C与引导3的正确顺序列顺序和抵消。真的有可能吗？
This is as far as I've got using JSFiddle: http://jsfiddle.net/3vYgR/
就我使用 JSFiddle 而言，这是：http: //jsfiddle.net/3vYgR/
回答by Zim
I think you want to look at the pushand pullclasses...
我想你想看看push和pull类......
<div class="row">
<div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div>
<div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div>
<div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div>
</div>
Demo: http://bootply.com/77853
回答by rsigg
Any reason to not use more traditional methods on this, ie. floating B left and the other elements to the right?
有什么理由不使用更传统的方法，即。向左浮动 B，向右浮动其他元素？
Like if you added this to current CSS in your jsfiddle:
就像您在 jsfiddle 中将其添加到当前 CSS 中一样：
.b {
float: left;
width: 50%;
height: 100px;
}
.a, .c {
float: right;
width: 50%;
height: 50px;
}
See http://jsfiddle.net/E6BFk/
I'm not sure that Bootstrap's column ordering could accomplish the stacking effect, perhaps only the re-ordering... Though the documentation is pretty slim on that feature.
我不确定 Bootstrap 的列排序是否可以实现堆叠效果，也许只是重新排序......尽管该功能的文档非常少。
回答by Dave
I tried the push/pull as shown in the answer by Skelly but C ends up in a new row once heights are applied: http://www.bootply.com/Q3djHYawgb#
我尝试了推/拉，如 Skelly 的回答所示，但一旦应用高度，C 就会在新行中结束：http: //www.bootply.com/Q3djHYawgb#
If B can be shown first when shown in small size, then I think it makes more sense to create a row inside the right hand side column to contain A and C:
如果 B 在以小尺寸显示时可以首先显示，那么我认为在右侧列中创建一行以包含 A 和 C 更有意义：
<div class="containing row">
<div class="b col-xs-12 col-md-6">Content of B</div>
<div class="ac col-xs-12 col-md-6">
<div class="row">
<div class="a col-xs-12">Content of A</div>
</div>
<div class="row">
<div class="c col-xs-12">Content of C</div>
</div>
</div>
</div>
回答by Mark Cooper
The answer provided by @skelly is great starting point, but does cause some vertical alignment issues. Imagine Ais a talldiv, then Cis vertically aligned below A.:
@skelly 提供的答案是一个很好的起点，但确实会导致一些垂直对齐问题。想象一下A是一个高大的div，然后C垂直对齐在 A 下方：
[A] [B]
[ ]
[C]
Also, If you want to take this a step further you may also need to consider using clearfixblocks. For example;
此外，如果您想更进一步，您可能还需要考虑使用clearfix块。例如;
<!-- Add clearfix for only the required viewport(s) -->
<div class="clearfix visible-md-block visible-lg-block"></div>
Without clearfixmdor lgmight end up as:
没有clearfixmd或lg可能最终为：
[A] [B]
[C] [D]
This is particularly important if you want more than 2 elements in the final "column", or the heights of the elements start throwing other elements out of alignment.
如果您希望最终“列”中有 2 个以上的元素，或者元素的高度开始使其他元素不对齐，这一点尤其重要。
With the clearfixmdor lgwould be:
与clearfixmdorlg将是：
[A] [B]
[C]
[D]
Example fiddle: http://jsfiddle.net/L5174o8d/
小提琴示例：http: //jsfiddle.net/L5174o8d/
