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

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 >
  <div >
    <div >
      <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 >
      <img
        style="width: 600px"
        
        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 >
    <div >
      <img
        style="width: 600px"
        
        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 >
      <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 >
    <div >
      <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 >
      <img
        style="width: 600px"
        
        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 in phone.

CodePudding user response：

Just use

order-1 order-sm-2

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