html - Bootstrap 4 - 屏幕上的文本位于图像旁边......在智能手机上图像下方的文本

Question

使用 Bootstrap 4(可能还有所有其他版本)，我如何确保屏幕上的文本位于图像左侧并且图像位于智能手机上的文本上方？

这是我的源代码:

<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Text</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Image</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Image</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Text</div>
</div>
</div>

flex-direction: row-reverse 在这里不起作用。

Answer 1

使用 .order 类来定位图像:

<div class="container">
  <div class="row">
    <div class="col-md-6 col-12">Text</div>
    <div class="col-md-6 col-12 order-first">Image</div>
  </div>
  <div class="row">
    <div class="col-md-6 col-12 order-first">Image</div>
    <div class="col-md-6 col-12">Text</div>
  </div>
</div>

https://getbootstrap.com/docs/4.4/layout/grid/#order-classes

您还可以根据宽度使用通常的 xs、sm、md、lg 和 xl 标签添加它们，例如.order-md-first

https://jsfiddle.net/Sirence/cx6k1048/4/