更新

Question

我试图实现以下目标：

大屏幕：

第一行：右侧的图像和文字

第二行：右侧的文字和图片

第三行：右侧的图像和文字

小屏幕

第一行：下面的文字和图片

第二行：它下面的文字和图片

第三行：下面的文字和图片

不确定这样做的理想方式是什么？有什么建议吗？

由于

Answer 1

首先，您需要为移动设备制作全宽的列。为此，请对所有人使用 col-12 。

您只需要重新排序第一个和最后一个img列。使用 order-last 和 order-sm-0 。

还有响应式.order-first和.order-last类，它们分别通过应用order：-1和order：13（order：$ columns + 1）来改变元素的顺序。这些类也可以根据需要与编号的.order- *类混合。 - Bootstrap-order

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row border">
    <div class="col-sm col-12 order-last order-sm-0">
      <img src="http://via.placeholder.com/200"></div>
    <div class="explainertext col-sm col-12">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor nesciunt sequi sed tenetur sapiente nihil ratione soluta, ullam delectus architecto cupiditate. Minus tenetur fugiat perferendis. Perferendis impedit doloremque aspernatur?
    </div>
  </div>
  <div class="row border my-3">
    <div class="explainertext col-sm col-12">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat eius hic nihil ut velit odio autem debitis maxime modi repudiandae itaque, inventore quod amet dolore optio adipisci maiores non corporis?
    </div>
    <div class="col-sm col-12">
      <img src="http://via.placeholder.com/200">
    </div>
  </div>
  <div class="row border">
    <div class="col-sm col-12 order-last order-sm-0">
      <img src="http://via.placeholder.com/200"></div>
    <div class="explainertext col-sm col-12">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor nesciunt sequi sed tenetur sapiente nihil ratione soluta, ullam delectus architecto cupiditate. Minus tenetur fugiat perferendis. Perferendis impedit doloremque aspernatur?
    </div>
  </div>
</div>

＆＃13;

更新

要为小尺寸屏幕及其下方的列重新排序，请使用col-md代替col-sm和order-sm-last order-md-0作为第二个文本列。

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row border">
    <div class="col-md col-12 order-last order-sm-0">
      <img src="http://via.placeholder.com/200"></div>
    <div class="explainertext col-sm col-12">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor nesciunt sequi sed tenetur sapiente nihil ratione soluta, ullam delectus architecto cupiditate. Minus tenetur fugiat perferendis. Perferendis impedit doloremque aspernatur?
    </div>
  </div>
  <div class="row border my-3">
    <div class="col-md col-12 order-sm-last order-md-0">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat eius hic nihil ut velit odio autem debitis maxime modi repudiandae itaque, inventore quod amet dolore optio adipisci maiores non corporis?
    </div>
    <div class="col-md col-12">
      <img src="http://via.placeholder.com/200">
    </div>
  </div>
  <div class="row border">
    <div class="col-md col-12 order-last order-sm-0">
      <img src="http://via.placeholder.com/200"></div>
    <div class=" col-md col-12 ">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor nesciunt sequi sed tenetur sapiente nihil ratione soluta, ullam delectus architecto cupiditate. Minus tenetur fugiat perferendis. Perferendis impedit doloremque aspernatur?
    </div>
  </div>
</div>

＆＃13;

响应之字形网格在bootstrap中

1 个答案:

更新