CSS Bootstrap 4，如何颠倒列的顺序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46672633/
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 4, how reverse the order of columns?
提问by Patrioticcow
I have this simple scenario:
我有一个简单的场景：
<div class="row">
<div class="col-md-12 col-lg-6 col-xl-7">A</div>
<div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>
basically if md
基本上如果 md
A
B
I would like it, if md
我愿意，如果 md
B
A
I have tried many variants found on web, like flex-firstand whatnot.. can't seem to get it to work
我已经尝试了很多在网上找到的变体，比如flex-first和诸如此类的......似乎无法让它工作
Any ideas?
有任何想法吗？
回答by Nenad Vracar
If you want to change order on mdand larger sizes you can use order-md-, this is provided by bootstrap. It looks like, if you want to change order only on mdsize you will have to define normal order on one larger size Fiddle
如果您想更改订单md和可以使用的更大尺寸order-md-，这是由bootstrap提供的。看起来，如果您只想更改md尺寸的订单，则必须在一个较大尺寸的Fiddle上定义正常订单
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12 order-md-2">A</div>
<div class="col-md-12 order-md-1">B</div>
</div>回答by Tim Vermaelen
It's also possible to use the flex-helper classes to solve this issue.
This solution allows you to reverse the order without the order count on the columns.
也可以使用flex-辅助类来解决这个问题。此解决方案允许您颠倒顺序，而无需对列进行顺序计数。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex-column-reverse flex-lg-row">
<div class="col-md-12 col-lg-6 col-xl-7">A</div>
<div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>The flex-directionis now reversed by default (md) and will be overriden on the lg breakpoint.
在flex-direction现在默认（MD）逆转，将在LG断点覆盖。
回答by Thorben Schmitt
Easiest solution will be:
最简单的解决方案是：
.row{
flex-direction: row-reverse;
}
