html - 使用 CSS 切换列放置 Bootstrap 4

Question

查看示例代码: http://www.bootply.com/kp2Iv3uJ4j

简单地说，我只想使用 CSS 将左列更改为右列。有什么方法可以只使用 CSS 而不必更改 HTML 来做到这一点吗？

例如，如果第一列中有 Logo ，第二列中有文本，我可以只使用 CSS 让它们交换位置吗？

非常感谢您的宝贵时间!

沃伦

Answer 1

给该行一个 row-reverse 如下:

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

示例如下:Bootply

或者，如果您确实想更改一些 HTML，这将是更好的选择:

<div class="row flex-row-reverse">
  <div class="col-md-6 first">
     <img src="http://placehold.it/350x150?text=first">
  </div>
  <div class="col-md-6 second">
      <img src="http://placehold.it/350x150?text=second">
  </div>
</div>

这是一个例子 Bootply