Bootstrap 4，如何反转列的顺序? [英] Bootstrap 4, how reverse the order of columns?

问题描述

我有一个简单的场景:

<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>

基本上是md

A
B

如果md

B
A

我尝试了许多在Web上找到的变体，例如flex-first和诸如此类..似乎无法使其正常工作

I have tried many variants found on web, like flex-first and whatnot.. can't seem to get it to work

有什么想法吗?

推荐答案

如果要更改md和更大尺寸的订单，可以使用order-md-，这由 提琴

If you want to change order on md and larger sizes you can use order-md-, this is provided by bootstrap. It looks like, if you want to change order only on md size you will have to define normal order on one larger size 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>

这篇关于Bootstrap 4，如何反转列的顺序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！