如何使用 Bootstrap 更改响应页面上的文本位置？

Question

我希望你做得很好。

所以，我在这里遇到了这个问题。 我想创建一个类似这样的页面布局：

Image - Description
Description - Image
Image - Description
and so on...

每当它在较小的设备上查看时，它都会转向：

Image
Description

Image
Description

and so on...

但是，我得到了这个：

Image
Description

Description
Image 

Image
Description

如何实现这种布局？

这是我的代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<div class="container-fluid padding">

  <div class="container padding">
    <div class="row padding">
      <div class="col-md-6 mt-5 mb-5">
        <img class="img-fluid rounded border" width="300" height="200" src="" alt="" />
      </div>
      <div class="col-md-6 align-self-center mt-5 mb-5">
        <h3>Text Heading</h3>
        <p class="lead">Lorem Ipsum Dolor Sit Amet Just A Regular Text</p>
      </div>

      <div class="col-md-6 align-self-center mt-5 mb-5">
        <h3>Text Heading</h3>
        <p class="lead">Lorem Ipsum Dolor Sit Amet Just A Regular Text</p>
      </div>
      <div class="col-md-6 mt-5 mb-5">
        <img class="img-fluid rounded border" width="300" height="200" src="" alt="" />
      </div>

      <div class="col-md-6 mt-5 mb-5">
        <img class="img-fluid rounded border" width="300" height="200" src="" alt="" />
      </div>
      <div class="col-md-6 align-self-center mt-5 mb-5">
        <h3>Text Heading</h3>
        <p class="lead">Lorem Ipsum Dolor Sit Amet Just A Regular Text</p>
      </div>
    </div>
  </div>
</div>

非常感谢！

Answer 1

您应该单独定义每一行（您的所有列都在一行中），然后在每一行中，将每个块定义为 col-12 以启动并切换到 col-md-6 以获得更大的显示。

将所有内容按图像/描述顺序开始，对于交替行，以 Bootstrap 的 order-md-first 到文本块，使其首先出现。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<div class="container-fluid padding">
    <div class="row padding">
        <div class="col-12 col-md-6 mt-5 mb-5">
            <img class="img-fluid rounded border" width="300" height="200" src="" alt="" />
        </div>
        <div class="col-12 col-md-6 align-self-center mt-5 mb-5">
            <h3>Text Heading</h3>
            <p class="lead">Lorem Ipsum Dolor Sit Amet Just A Regular Text</p>
        </div>
    </div>
    <div class="row padding">
        <div class="col-12 col-md-6 mt-5 mb-5">
            <img class="img-fluid rounded border" width="300" height="200" src="" alt="" />
        </div>
        <div class="col-12 col-md-6 align-self-center mt-5 mb-5 order-md-first">
            <h3>Text Heading</h3>
            <p class="lead">Lorem Ipsum Dolor Sit Amet Just A Regular Text</p>
        </div>
    </div>
    <div class="row padding">
        <div class="col-12 col-md-6 mt-5 mb-5">
            <img class="img-fluid rounded border" width="300" height="200" src="" alt="" />
        </div>
        <div class="col-12 col-md-6 align-self-center mt-5 mb-5">
            <h3>Text Heading</h3>
            <p class="lead">Lorem Ipsum Dolor Sit Amet Just A Regular Text</p>
        </div>
    </div>
</div>