Question

我希望我的网站在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尺寸屏幕及以下屏幕上显示，文字将在手机下方。

Answer 1

您可以使用Bootstrap 4的 order classes 。

不幸的是，Bootstrap 4的布局类是 mobile-first ，因此您需要指定默认情况下文本应在图像的之后，以及在大屏幕上覆盖。

要在中型和小型设备上将文本放在图像下方，您需要为文本指定app.tsx和order-2类，为图像赋予order-md-1和{ {1}}。

这可以在下面看到：

order-1

请注意，在小屏幕上（例如默认视图中的此代码段），图像位于文本之前，而在大屏幕（例如order-md-2视图中的此代码段）中，图像位于文本之后。文字。

Bootstrap 4：当屏幕尺寸改变时如何改变列的顺序

1 个答案: