CSS 使用推/拉更改 Bootstrap 中 col-*-12 列的顺序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25714852/
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
Change the order of col-*-12 columns in Bootstrap using push/pull
提问by Mazzy
I have two columns of the same size (.col-xs-12) and I would change their place when the screen size correspond to that of a mobile device. I would place them in the reverse order.
我有两列大小相同 ( .col-xs-12)，当屏幕大小与移动设备的屏幕大小相对应时，我会改变它们的位置。我会按照相反的顺序放置它们。
I have read that push and pull bootstrap directives help to accomplish that, but is it possible to change the place of two columns of the same size with the following classes?
我已经读过推和拉引导程序指令有助于实现这一点，但是是否可以使用以下类更改相同大小的两列的位置？
div.col-xs-12.col-xs-push-12
p test1
div.col-xs-12.col-xs-pull-12
p test2
回答by Hashem Qolami
Actually you can not reorder the columns having .col-*-12by push/pullhelper classes. The sum of columns exceeds the default 12columns which is defined by @grid-columns.
实际上，您无法对.col-*-12by push/ pullhelper 类的列重新排序。列的总和超过了12由 定义的默认列@grid-columns。
You could either change the order of columns in HTML and then use the ordering classes on larger screens as follows:
您可以更改 HTML 中列的顺序，然后在较大的屏幕上使用排序类，如下所示：
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6">
<p>test2</p>
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6">
<p>test1</p>
</div>
</div>
Or use this fancy approachto reverse the ordering of the columns that are placed vertically under each other:
或者使用这种奇特的方法来颠倒垂直放置的列的顺序：
@media (max-width: 767px) {
.row.reorder-xs {
transform: rotate(180deg);
direction: rtl; /* Fix the horizontal alignment */
}
.row.reorder-xs > [class*="col-"] {
transform: rotate(-180deg);
direction: ltr; /* Fix the horizontal alignment */
}
}
It's worth noting that CSS transforms are supported in IE9as well; Just don't forget to add vendor prefixes.
回答by Zim
In Bootstrap 4, you canchange the order of full-width (12 unit) columns using the flexbox ordering classes.
在Bootstrap 4 中，您可以使用 flexbox 排序类更改全宽（12 个单位）列的顺序。
Update 2017 - Bootstrap 4 alpha 6
2017 年更新 - Bootstrap 4 alpha 6
In 3.x you could only push/pull columns left or right (horizontally). With the new flexbox ordering utils in 4.x, it's now possible to change the order of columns vertically...
在 3.x 中，您只能向左或向右（水平）推/拉列。使用 4.x 中新的 flexbox 排序实用程序，现在可以垂直更改列的顺序......
<div class="container">
<div class="row">
<div class="col-12">1</div>
<div class="col-sm-12 flex-first flex-sm-unordered">2 (first on xs)</div>
</div>
</div>
http://www.codeply.com/go/7RUJORgxBK
http://www.codeply.com/go/7RUJORgxBK
Update Bootstrap 4 Beta
更新 Bootstrap 4 测试版
The alpha flex-ordering classed have changed to order-classes.
flex-分类的 alpha排序已更改为order-类。
<div class="container">
<div class="row">
<div class="col-12 order-sm-1 order-2">1</div>
<div class="col-sm-12 order-1">2 (first on xs)</div>
</div>
</div>
回答by Devin
You can totally do it, see Bootstrap's Grid Column Ordering
您完全可以做到，请参阅Bootstrap 的 Grid Column Ordering
But of course your example will have no effect since xs-12 is a full width column, so this will apply only to models where the sum of the columns is 12 (or if 16 or whatever if you customize your Bootstrap grid). See the Bootstrap example on that same page for illustrative purposes:
但是，当然，您的示例将无效，因为 xs-12 是全宽列，因此这仅适用于列总和为 12（或如果您自定义 Bootstrap 网格为 16 或其他任何内容）的模型。出于说明目的，请参阅同一页面上的 Bootstrap 示例：
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
回答by bluetwin
If you need to reorder cols for a responsive case like
如果您需要为响应式案例重新排序 cols，例如
div.col-xs-12.col-sm-9 # this should be on the bottom for col-xs-12
p test1
div.col-xs-12.col-sm-3 # this should be on the top for col-xs-12
p test2
you could use a .pull-rightclass and reverse the column order.
您可以使用.pull-right类并反转列顺序。
div.col-xs-12.col-sm-3.pull-right
p test2
div.col-xs-12.col-sm-9
p test1
then they are in order for col-xs-12and appear correctly for the other breakpoints.
那么它们是为了col-xs-12其他断点并正确显示。
回答by DGRFDSGN
In case anyone comes here with a similar issue like me, only finding push/pull doesn't fit your needs, because either col-xs-12 wont pull/push or using more than 2 columns makes it tougher to figure out the push/pull values here is my solution.
如果有人像我一样遇到类似的问题，只找到推/拉不适合您的需求，因为 col-xs-12 不会拉/推或使用超过 2 列使得更难找出推/这里的拉取值是我的解决方案。
Below is the fancy solution by @hashemquolami
以下是@hashemquolami 的奇特解决方案
@media (max-width: 767px) {
.row.reorder-xs {
transform: rotate(180deg);
direction: rtl; /* Fix the horizontal alignment */
}
.row.reorder-xs > [class*="col-"] {
transform: rotate(-180deg);
direction: ltr; /* Fix the horizontal alignment */
}
}
Although this approach works fine, I have a different solution:
虽然这种方法效果很好，但我有一个不同的解决方案：
The bootstrap grid works by floating the columns left, this can easily be altered with css. Look at the markup below, as bonus col-md-offset-1 reversed to emulate 5 centered columns.
引导网格通过向左浮动列来工作，这可以通过 css 轻松更改。看看下面的标记，因为bonus col-md-offset-1 被反转以模拟5 个居中的列。
HTML
HTML
<div class="container">
<div class="row reverseOrder">
<div class="col-md-2 col-md-offset-1">A</div>
<div class="col-md-2">B</div>
<div class="col-md-2">c</div>
<div class="col-md-2">d</div>
<div class="col-md-2 ">e</div>
</div>
</div>
CSS
CSS
@media screen and ( min-width: 992px) {
.reverseOrder [class^="col-"] {
float: right;
}
.reverseOrder .col-md-offset-1 {
margin-right: 8.333333333333332%;
margin-left: 0px;
}
}
回答by Janek Kozera
I had same problem and solved it this way:
我遇到了同样的问题并以这种方式解决了它：
HTML
HTML
<div class="col-md-10 col-sm-10 col-xs-12 more-than" style="display: none;">
<p>test</p>
</div>
<div class="col-md-2 col-sm-2 col-xs-12">
<p>test</p>
</div>
<div class="col-md-10 col-sm-10 col-xs-12 less-than">
<p>test</p>
</div>
CSS
CSS
@media (max-width: 767px){
.less-than {
display: none;
}
.more-than {
display: block !important;
}
}
