Bootstrap，让两个元素互换边

Question

我是一段时间以来第一次建立一个网站，而且自上次使用以来，Bootstrap似乎发生了一些变化。

所以我有两个像这样的div：

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

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

因此Two当然会显示在右列中

[以前，如果我想让它们切换侧面，我只需将'One'浮动到右侧，将'Two'浮动到左侧。

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

但是，我尝试了以下操作，并且两个div都保持不变：

.one {
    margin-left: auto;
}

.two {
    margin-right: auto;
}

是否有解决方法，而不必更改标记？

Answer 1

我不知道是否存在本机引导的解决方案，但您绝对可以为此使用flex-direction: row-reverse;属性。

请看下面的代码段：

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