css - 如何在 Bootstrap 4 中制作奇数/偶数列？

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>