如何在 Bootstrap 4 中颠倒列的顺序? [英] How can I reverse the order of columns in Bootstrap 4?

问题描述

我有一个简单的场景:

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

基本上如果 md

A乙

我愿意，如果md

B一个

我尝试了很多在网络上发现的变体，比如 flex-first 等等......似乎无法让它工作

有什么想法吗?

解决方案

如果您想更改 md 和更大尺寸的订单，您可以使用 order-md-，这是由 bootstrap 提供的.看起来，如果您只想更改 md 尺寸的订单，则必须在更大尺寸的 小提琴

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="样式表"/><div class="row"><div class="col-md-12 order-md-2">A</div><div class="col-md-12 order-md-1">B</div>

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

A
B

I would like it, if md

B
A

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

Any ideas?

解决方案

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