使用bootstrap类将顺序设置为具有不同断点的同一行上的图像和文本

Question

我在同一行中有一个图像和文本，图像在前面，文本在它的左边。我正在尝试做的是，当屏幕缩小到小断点时，使文本显示在图像上方，而当调整大小时，图像返回到左侧。我在Text标签下面有Image标签。这是我的代码。

<div class="container-fluid">
  <div class="row">
    <div class="col-md-10 order-2 col-sm-10 order-1 flex-column">
      <h2>Alignment</h2>
      <p> Alignment helps organize and order the content, controlling how the eye flows from one 
          component to the next. It is the organization and creation of invisible lines. Without 
          alignment, users will have a hard time recognizing how elements relate to eachother, and 
          your page will look messy and disorganized.</p>
            </div>
        <div class="col-md-2 order-1 col-sm-2 order-2 flex-column">
            <img src="carp4.jpg" class="">
        </div>
    </div>
</div>

Answer 1

您不需要将顺序从1颠倒到2，因为两个断点都是以相同顺序颠倒的。如果需要，可以在像order-1 order-sm-2这样的断点上进行切换。

​

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-10 order-2">
            <h2>Alignment</h2>
            <p>Alignment helps organize and order the content, controlling how the eye flows from one component to the next. It is the organization and creation of invisible lines. Without alignment, users will have a hard time recognizing how elements relate to eachother, and your page will look messy and disorganized.</p>
        </div>
        <div class="col-sm-2 order-1">
            <img src="https://picsum.photos/100/100" alt="" class="img-fluid w-100" />
        </div>
    </div>
</div>

​

你也可以为超小屏幕使用flex-column-reverse，为小屏幕或更小的屏幕使用flex-sm-row-reverse。这样就可以避免使用order-*。对于超过2列的情况，order-*很方便。

​

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
    <div class="row flex-column-reverse flex-sm-row-reverse">
        <div class="col-sm-10">
            <h2>Alignment</h2>
            <p>Alignment helps organize and order the content, controlling how the eye flows from one component to the next. It is the organization and creation of invisible lines. Without alignment, users will have a hard time recognizing how elements relate to eachother, and your page will look messy and disorganized.</p>
        </div>
        <div class="col-sm-2">
            <img src="https://picsum.photos/100/100" alt="" class="img-fluid w-100" />
        </div>
    </div>
</div>

​

但是，如果您可以交换图像和文本列，这似乎会使事情变得过于复杂。

​

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2">
            <img src="https://picsum.photos/150/100" alt="" class="img-fluid w-100" />
        </div>
        <div class="col-sm-10">
            <h2>Alignment</h2>
            <p>Alignment helps organize and order the content, controlling how the eye flows from one component to the next. It is the organization and creation of invisible lines. Without alignment, users will have a hard time recognizing how elements relate to eachother, and your page will look messy and disorganized.</p>
        </div>
    </div>
</div>

​

这是一个jsfiddle，可以调整结果的大小并发挥作用。