CSS 通过 Bootstrap4 对列进行排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37814508/
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
Order columns through Bootstrap4
提问by Cray
I have 3 columns which I want to order in different ways on desktop and mobile. Currently, my gird looks like this:
我有 3 列，我想在桌面和移动设备上以不同的方式订购。目前，我的网格看起来像这样：
<div class="row">
<div class="col-xs-3 col-md-6">
1
</div>
<div class="col-xs-3 col-md-6">
2
</div>
<div class="col-xs-6 col-md-12">
3
</div>
</div>In the mobile view I want to have the following output:
在移动视图中，我希望有以下输出：
1-3-2
Unfortunately I don't get how to solve this with the .col-md-push-*and .col-md-pull-*classes in Bootstrap 4.
不幸的是，我不知道如何使用Bootstrap 4 中的.col-md-push-*和.col-md-pull-*类来解决这个问题。
回答by Zim
2018 - Revisiting this question with the latest Bootstrap 4.
2018 - 使用最新的 Bootstrap 4 重新审视这个问题。
The responsive ordering classesare now order-first, order-lastand order-0- order-12
响应式排序类现在是order-first，order-last并且order-0-order-12
The Bootstrap 4 pushpullclasses are now (This only works pre 4.0 beta)push-{viewport}-{units}and pull-{viewport}-{units}and the xs-infix has been removed. To get the desired 1-3-2 layout on mobile/xs would be: Bootstrap 4 push pull demo
该引导4推拉力类现在是（这只适用于 4.0 测试版之前）push-{viewport}-{units}和pull-{viewport}-{units}与xs-缀已被删除。要在 mobile/xs 上获得所需的 1-3-2 布局是：Bootstrap 4 push pull demo
Bootstrap 4.1+
引导程序 4.1+
Since Bootstrap 4 is flexbox, it's easy to change the order of columns. The cols can be ordered from order-1to order-12, responsively such as order-md-12 order-2(last on md, 2nd on xs) relative to the parent .row.
由于 Bootstrap 4 是 flexbox，所以很容易改变列的顺序。cols 可以从order-1to排序order-12，响应性例如order-md-12 order-2（last on md, 2nd on xs）相对于 parent .row。
<div class="container">
<div class="row">
<div class="col-3 col-md-6">
<div class="card card-body">1</div>
</div>
<div class="col-6 col-md-12 order-2 order-md-12">
<div class="card card-body">3</div>
</div>
<div class="col-3 col-md-6 order-3">
<div class="card card-body">2</div>
</div>
</div>
</div>
Demo: Change order using order-*classes
Desktop (larger screens):
桌面（大屏幕）：
Mobile (smaller screens):
移动设备（较小的屏幕）：
It's also possible to change column order using the flexbox direction utils...
也可以使用flexbox 方向工具更改列顺序...
<div class="container">
<div class="row flex-column-reverse flex-md-row">
<div class="col-md-8">
2
</div>
<div class="col-md-4">
1st on mobile
</div>
</div>
</div>
Demo: Bootstrap 4.1 Change Order with Flexbox Direction
演示：Bootstrap 4.1 使用 Flexbox 方向更改订单
Older version demos
demo - alpha 6
demo - beta (3)
See more Bootstrap 4.1+ ordering demos
Related:有关的：
Column ordering in Bootstrap 4 with push/pull and col-md-12Bootstrap 4 中的列排序，带有推/拉和 col-md-12
Bootstrap 4 change order of columnsBootstrap 4 更改列的顺序
A-C-B A-B-C
ACB ABC
回答by bprdev
This can also be achieved with the CSS "Order" property and a media query.
这也可以通过 CSS“Order”属性和媒体查询来实现。
Something like this:
像这样的东西：
@media only screen and (max-width: 768px) {
#first {
order: 2;
}
#second {
order: 4;
}
#third {
order: 1;
}
#fourth {
order: 3;
}
}
CodePen Link: https://codepen.io/preston206/pen/EwrXqm
CodePen 链接：https://codepen.io/preston206/pen/EwrXqm
回答by Marek Kus
I'm using Bootstrap 3, so i don't know if there is an easier way to do it Bootstrap 4 but this css should work for you:
我正在使用 Bootstrap 3，所以我不知道是否有更简单的方法来使用 Bootstrap 4，但是这个 css 应该适合你：
.pull-right-xs {
float: right;
}
@media (min-width: 768px) {
.pull-right-xs {
float: left;
}
}
...and add class to second column:
...并将类添加到第二列：
<div class="row">
<div class="col-xs-3 col-md-6">
1
</div>
<div class="col-xs-3 col-md-6 pull-right-xs">
2
</div>
<div class="col-xs-6 col-md-12">
3
</div>
</div>
EDIT:
编辑：
Ohh... it looks like what i was writen above is exacly a .pull-xs-rightclass in Bootstrap 4 :X Just add it to second column and it should work perfectly.
哦...看起来我上面写的正是一个 . Bootstrap 4 中的pull-xs-right类：X 只需将它添加到第二列，它应该可以完美运行。
回答by nikhil sugandh
even this will work:
即使这样也可以：
<div class="container">
<div class="row">
<div class="col-4 col-sm-4 col-md-6 order-1">
1
</div>
<div class="col-4 col-sm-4 col-md-6 order-3">
2
</div>
<div class="col-4 col-sm-4 col-md-12 order-2">
3
</div>
</div>
</div>
回答by user3893613
Since column-ordering doesn't work in Bootstrap 4 beta as described in the code provided in the revisited answer above, you would need to use the following (as indicated in the codeply 4 Flexbox order demo - alpha/beta links that were provided in the answer).
由于列排序在 Bootstrap 4 beta 中不起作用，如上面重新访问的答案中提供的代码中所述，您需要使用以下内容（如 codeply 4 Flexbox order demo - alpha/beta 中提供的链接所示）答案）。
<div class="container">
<div class="row">
<div class="col-3 col-md-6">
<div class="card card-block">1</div>
</div>
<div class="col-6 col-md-12 flex-md-last">
<div class="card card-block">3</div>
</div>
<div class="col-3 col-md-6 ">
<div class="card card-block">2</div>
</div>
</div>
Note however that the "Flexbox order demo - beta" goes to an alpha codebase, and changing the codebase to Beta (and running it) results in the divs incorrectly displaying in a single column -- but that looks like a codeply issue since cutting and pasting the code out of codeply works as described.
但是请注意，“Flexbox order demo - beta”转到 alpha 代码库，将代码库更改为 Beta（并运行它）会导致 div 错误地显示在单列中——但这看起来像是一个代码问题，因为切割和将代码粘贴到 codeply 中的工作如上所述。
回答by MarBer
You can do two different container one with mobile order and hide on desktop screen, another with desktop order and hide on mobile screen
你可以做两个不同的容器，一个是移动订单并隐藏在桌面屏幕上，另一个是桌面订单并隐藏在移动屏幕上
