Html 引导程序4：如何在屏幕大小更改时更改列的顺序

我希望我的网站有md大小的屏幕和更大的手机在右边和文本在左边。但一旦屏幕尺寸小于md，我希望文本在手机下方

<section id="" class="pt-3 mt-3">
    <div class="container">
      <div class="row">
        <div class="col-md-6 my-auto text-right">
          <h3 class="display-3 lato_text">Description</h3>
          <p class="lead">On the map, click on an OddJob to get a quick preview.</p>
          <p class="lead">In the preview, you will see the title and price of the job.</p>
        </div>
        <div class="col-md-6">
          <div class="text-center">
            <img id="phone-screenshot" src="img/JobFullDesc.jpg" class="img-fluid mb-3">
          </div>
        </div>

      </div>
    </div>
  </section>

描述
在地图上，单击一个奇怪的作业以获得快速预览
在预览中，您将看到工作的标题和价格

---

我将如何改变我的html，使其在md大小的屏幕和以下，文字将低于手机

您可以使用Bootstrap 4的

<section id="" class="pt-3 mt-3">
    <div class="container">
      <div class="row">
        <div class="col-md-6 my-auto text-right">
          <h3 class="display-3 lato_text">Description</h3>
          <p class="lead">On the map, click on an OddJob to get a quick preview.</p>
          <p class="lead">In the preview, you will see the title and price of the job.</p>
        </div>
        <div class="col-md-6">
          <div class="text-center">
            <img id="phone-screenshot" src="img/JobFullDesc.jpg" class="img-fluid mb-3">
          </div>
        </div>

      </div>
    </div>
  </section>

不幸的是，Bootstrap 4的布局类是，因此您需要指定默认情况下文本应位于图像之后，并在大屏幕上覆盖此选项

要将文本放置在中型和小型设备上的图像下方，您需要将文本指定为class

order-2

和

order-md-1

，将图像指定为class

order-1

和

order-md-2

这可以从以下几点看出：

描述
在地图上，单击一个奇怪的作业以获得快速预览
在预览中，您将看到工作的标题和价格

我尝试添加order-md-2（和1），但似乎效果相反。因此，在md以上的尺寸上，img位于左侧，文本位于右侧。对于sm，它将是文本在顶部，img在底部。@TamirOffen——你把类放错了方向

order-2 order-md-1

在描述中，而

order-1 order-md-2

在图像中：）