Bootstrap，让两个元素交换边答案

【问题标题】：Bootstrap, getting two elements to swap sidesBootstrap，让两个元素交换边
【发布时间】：2020-03-01 00:24:24
【问题描述】：

我在一段时间内第一次构建网站 - 自从我上次使用以来，Bootstrap 似乎发生了很大变化。

所以我有两个这样的 div：

<div class="one col-lg-6">
    <p>One</p>
</div>

<div class="two col-lg-6">
    <p>Two</p>
</div>

所以Two 当然会显示为右侧列

以前，如果我想让他们换边，我会简单地将“一”浮动到右侧，将“二”浮动到左侧。

但这似乎不再起作用（我认为与 Flexbox 有关？）...我读到设置自动边距可以用来代替浮动元素。

但是，我尝试了以下方法，两个 div 都保持原样：

.one {
    margin-left: auto;
}

.two {
    margin-right: auto;
}

是否有无需更改标记的解决方法？

【问题讨论】：

标签： html css twitter-bootstrap flexbox css-float

【解决方案1】：

我不知道是否有原生引导程序的解决方案，但您绝对可以为此使用 flex-direction: row-reverse; 属性。

看看下面的sn-p：

.row-reverse {
  flex-direction: row-reverse;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row row-reverse">
  <div class="one col-6">
    <p>One</p>
  </div>

  <div class="two col-6">
      <p>Two</p>
  </div>
</div>

【讨论】：