how to create alternate blocks in bootstrap 5-CodePudding

I basically have a row with 3 sets of columns and I want the following layout (using bootstrap 5), basically Image on the left, text on the right. Next columns have text on the left, image on the right and finally image on the left, text on the right again

Image  Text
Text   Image
Image  Text

I tried something like the below but it messes things up on mobile. On mobile it should always be the image first and then the text.

<div ><img src="..." /></div>
<div >Some text</div>

<div ><img src="..." /></div>
<div >Some text</div>

<div ><img src="..." /></div>
<div  >Some text</div>

CodePudding user response：

<div>
      <div >
        <div >
          <img src="https://via.placeholder.com/100/" alt="" />
        </div>
        <div >
          <p>Some dummy text </p>
        </div>
      </div>
      <div >
        <div >
          <img src="https://via.placeholder.com/100/" alt="" />
        </div>
        <div >
          <p>Some dummy text </p>
        </div>
      </div>
      <div >
        <div >
          <img src="https://via.placeholder.com/100/" alt="" />
        </div>
        <div >
          <p>Some dummy text </p>
        </div>
      </div>
    </div>