Bootstrap 5：桌面和移动设备的不同对齐方式

Question

我有一个 bootstrap 5 网站模板，我想在其中按以下顺序显示 div：

桌面：

div的第一行：图像，文本

div的第二行：文本，图像

移动的：

div的第一行：图像，文本

div的第二行：图像，文本

简单地说，对于移动设备，每第二行 div 应该有不同的顺序/对齐方式。你能帮我实现它吗？我试过使用几个引导程序类，甚至硬编码左右浮动。没有任何帮助。这是我的代码：

    <!-- Img1 -->
      <div class="row" data-aos="fade-up" data-aos-delay="100">
        <div class="col-md-6">
          <img src="assets/img/portfolio/img1.jpg" class="rounded mx-auto d-block" alt="">
        </div>
        <div class="col-md-6 text-center align-items-center mob_padding_T20" style="color: #FF0000;">
              Copy1
        </div>
      </div>

    <!-- Img2 -->
      <div class="row" data-aos="fade-up" data-aos-delay="100" style="padding: 20px 0 0;">
        <div class="col-md-6" style="float:right;">
          <img src="assets/img/portfolio/img2.jpg" class="rounded mx-auto d-block" alt="">
        </div>
        <div class="col-md-6 text-center align-items-center mob_padding_T20" style="float:left; color: #FF0000;">
          Copy2
        </div>
      </div>

谢谢你。

Answer 1

这是解决方案：

<div className="row" data-aos="fade-up" data-aos-delay="100">
        <div className="col-6">
          <img src="https://picsum.photos/200" className="rounded mx-auto d-block" alt="" />
        </div>
        <div className="col-6 text-center align-items-center mob_padding_T20" >
          Copy1
        </div>
      </div>

      <div className="row" data-aos="fade-up" data-aos-delay="100" style={{ padding: "20px 0 0" }}>
        <div className="col-6 text-center align-items-center mob_padding_T20" style={{ float: "left", color: "#FF0000" }}>
          Copy2
        </div>
        <div className="col-6" style={{ float: "right" }}>
          <img src="https://picsum.photos/200" className="rounded mx-auto d-block" alt="" />
        </div>

      </div>

你的问题：

问题是，当您为您的 div 指定列大小时，您使用 col-md-6 这将仅适用于中型和更大的屏幕。这是解释bootstrap grid的链接

Answer 2

请试试这个

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row data-aos="fade-up" data-aos-delay="100"">
  <!--  Start Img 1  -->
    <div class="col-sm-6">
       <img src="assets/img/portfolio/img1.jpg" class="rounded mx-auto d-block" alt=""> IMG 1
    </div>
    <div class="col-sm-6">
      Text 1
    </div>
  <!--  End  Img 1  -->
    
  <!--  Start Img 2  -->
    <div class="col-sm-6">
      <img src="assets/img/portfolio/img1.jpg" class="rounded mx-auto d-block" alt=""> IMG 2
    </div>
     <div class="col-sm-6">
     Text 2
    </div>
    <!--  End  Img 2  -->
  </div>
</div>

<div class="container mt-5">
  <div class="row data-aos="fade-up" data-aos-delay="100"">
  <!--  Start Img 1  -->
    <div class="col-6">
       <img src="assets/img/portfolio/img1.jpg" class="rounded mx-auto d-block" alt=""> IMG 1
    </div>
    <div class="col-6">
      Text 1
    </div>
  <!--  End  Img 1  -->
    
  <!--  Start Img 2  -->
    <div class="col-6">
      <img src="assets/img/portfolio/img1.jpg" class="rounded mx-auto d-block" alt=""> IMG 2
    </div>
     <div class="col-6">
     Text 2
    </div>
    <!--  End  Img 2  -->
  </div>
</div>

建议: 请不要使用内联 CSS（style:: float:left 或 float:right），因为它很难管理响应式设备。

如果您不需要第二行，请将其删除并使用直接的 col-sm/col-md/col 类，因为它会影响 SEO。

如果您在单行中显示 text + img，那么您可以在 bootstrap 5 中使用 col-6。

请查看它的 codepen URL。我已经在 codepen 中为您提供了这两个示例。

如果您有任何其他问题，请告诉我。