How to arrange image and text properly in bootstrap responsive view?

Issue

I want to design a page with the help of bootstrap in a pattern of text then image, text then image , text then image it's correct in laptop but in mobile it gets out of order

<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>

I want to change the order of images appearing on the phone.

Solution

Just use

order-1 order-sm-2

as class. it changes the order of col which should appear first or second.

Answered By - UNRIVALLEDKING