Question

我有一个部分，该部分必须在左侧包含一个图像，在右侧包含一个文本，在下一个栏目中，我的意思是相反的，我的意思是，左侧为一个文本，右侧为一个图像。这是我的html：

<section>
        <div class="container">
            <div class="row no-gutters">
                <div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
                <div class="col-md-6">
                    <div class="feature-desc">
                        <p>text</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-desc">
                        <p>text</p>
                    </div>
                </div>
                <div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
                <div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
                <div class="col-md-6">
                    <div class="feature-desc">
                        <p>text</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-desc">
                        <p>text</p>
                    </div>
                </div>
                <div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
            </div>
        </div>
    </section>

在台式机上，它看起来应该是应该的，但是在移动设备上，顺序应该始终是图像，然后是文本。

该怎么办？

Answer 1

您应该为此使用flexbox order实用程序类。 Flexbox Order Bootstrap

以全屏模式打开代码段。

在文本中添加order-2 order-md-1，在图像中添加order-1 order-md-2。另外，为了使其正常工作，我不得不用一个类为row

的div包装文本和图像。

order-2 order-md-1意味着，在最小的设备上，将商品的顺序定为 2 ；在中等设备上，将商品的顺序定为 1

更新：您可以将align-items-center添加到垂直居中的行中

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<section>
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-6 ">
        <img src="https://placehold.it/100x100" alt="" class="img-fluid">
      </div>
      <div class="col-md-6 ">
        <div class="feature-desc">
          <p>text</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 order-2 order-md-1">
        <div class="feature-desc">
          <p>text</p>
        </div>
      </div>
      <div class="col-md-6 order-1 order-md-2">
        <img src="https://placehold.it/100x100" alt="" class="img-fluid">
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <img src="https://placehold.it/100x100" alt="" class="img-fluid">
      </div>
      <div class="col-md-6">
        <div class="feature-desc">
          <p>text</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 order-2 order-md-1">
        <div class="feature-desc">
          <p>text</p>
        </div>
      </div>
      <div class="col-md-6 order-1 order-md-2">
        <img src="https://placehold.it/100x100" alt="" class="img-fluid">
      </div>
    </div>
  </div>
</section>

如何使Bootstrap 4中的奇数/偶数cols？

1 个答案: