如何使用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以获得更大的显示。

将所有内容按image / description顺序开始，对于交替的行，按照Bootstrap的顺序-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>

​