如何在引导响应视图中正确地排列图像和文本？

Question

我想在引导下设计一个页面，在一个文本模式下，然后是图像，文本然后图像，文本然后图像--在笔记本电脑上是正确的，但是在移动中，它变得不正常了

<div class="container-fluid">
  <div class="row mt-5">
    <div class="col-sm-5 py-5 mt-5 mt-md-0 py-md-0 mx-auto">
      <h1>Fully Responsive Design</h1>
      <p style="font-size: large">
        When you use a theme created by Start Bootstrap, you know that the
        theme will look great on any device, whether it's a phone, tablet,
        or desktop the page will behave responsively!
      </p>
    </div>
    <div class="col-sm-5 mx-auto">
      <img
        style="width: 600px"
        class="img-fluid"
        src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?cs=srgb&dl=pexels-pixabay-60597.jpg&fm=jpg"
        alt=""
      />
    </div>
  </div>
  <div class="row mt-5">
    <div class="col-sm-5 mx-auto">
      <img
        style="width: 600px"
        class="img-fluid"
        src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?cs=srgb&dl=pexels-pixabay-60597.jpg&fm=jpg"
        alt=""
      />
    </div>
    <div class="col-sm-5 py-5 mt-5 mt-md-0 py-md-0 mx-auto">
      <h1>Updated For Bootstrap 4</h1>
      <p style="font-size: large">
        Newly improved, and full of great utility classes, Bootstrap 4 is
        leading the way in mobile responsive web development! All of the
        themes on Start Bootstrap are now using Bootstrap 4!
      </p>
    </div>
  </div>
  <div class="row mt-5">
    <div class="col-sm-5 py-5 mt-5 mt-md-0 py-md-0 mx-auto">
      <h1>Easy to Use & Customize</h1>
      <p style="font-size: large">
        Landing Page is just HTML and CSS with a splash of SCSS for users
        who demand some deeper customization options. Out of the box, just
        add your content and images, and your new landing page will be ready
        to go!
      </p>
    </div>
    <div class="col-sm-5 mx-auto">
      <img
        style="width: 600px"
        class="img-fluid"
        src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?cs=srgb&dl=pexels-pixabay-60597.jpg&fm=jpg"
        alt=""
      />
    </div>
  </div>
</div>

我想改变出现在电话上的图像的顺序。

Answer 1

只管用

order-1 order-sm-2

在课堂上。它改变了第一个或第二个应该出现的顺序。