1

I know that on bootstrap 4, you could simply write "order-#" in each div, but my project is based on bootstrap 3 so it would create problems if I change the versions now.

Please note that on a mobile screen, it needs to have this order: Image, Text, Image, Text, Image, text (reading from top to bottom)

Envious
  • 13
  • 3

1 Answers1

1

In Bootstrap 3, you can use push and pull as answered here: How do I change Bootstrap 3 column order on mobile layout?

Edit:

Here is a simple example that will display:

  • In the 1st row: Image on the left and Text on the right
  • In the second row: Text on the left and Image on the right

But on mobile, it will display in this order: Image - Text - Image - Text, because on md screen size and up we push the image and we pull the text

<div class="row">
    <div class="col-md-6"><img src="my_image.png"></div>
    <div class="col-md-6">Text here</div>
</div>

<div class="row">    
    <div class="col-md-6 col-md-push-6"><img src="my_image.png"></div>
    <div class="col-md-6 col-md-pull-6">Text here</div>
 </div>

You can refer to this documentation to learn more.

Moïze
  • 707
  • 8
  • 16