html - Bootrap 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没有在这里工作。

标签： htmlcsswebbootstrap-4media-queries

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/