如何在 bootstrap 5 中创建备用块

Question

我基本上有一行有 3 组列，我想要以下布局（使用 bootstrap 5），基本上左边是图像，右边是文本。下一列左边是文字，右边是图片，最后左边是图片，右边是文字

Image  Text
Text   Image
Image  Text

我尝试了类似下面的方法，但它在移动设备上出现问题。在移动设备上，它应该始终是图像在前，然后是文本。

<div class="col-md-6"><img src="..." /></div>
<div class="col-md-6">Some text</div>

<div class="col-md-6 order-last"><img src="..." /></div>
<div class="col-md-6">Some text</div>

<div class="col-md-6 order-last"><img src="..." /></div>
<div class="col-md-6" class="order-last">Some text</div>

Answer 1

<div>
      <div class="main-container d-flex flex-column flex-md-row">
        <div class="image-container">
          <img src="https://via.placeholder.com/100/" alt="" />
        </div>
        <div class="text-container">
          <p>Some dummy text </p>
        </div>
      </div>
      <div class="main-container d-flex flex-column flex-md-row-reverse">
        <div class="image-container">
          <img src="https://via.placeholder.com/100/" alt="" />
        </div>
        <div class="text-container">
          <p>Some dummy text </p>
        </div>
      </div>
      <div class="main-container d-flex flex-column flex-md-row">
        <div class="image-container">
          <img src="https://via.placeholder.com/100/" alt="" />
        </div>
        <div class="text-container">
          <p>Some dummy text </p>
        </div>
      </div>
    </div>

如何在 bootstrap 5 中创建备用块

how to create alternate blocks in bootstrap 5

twitter-bootstrap