如何使用 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>

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

How to change text position on responsive page with Bootstrap?

html

css

bootstrap-4

responsive