Bootstrap - Creating mobile-adaptation for reverse row pattern

Question

I want to create a reverse effect with Bootstrap (1st row: Text on the left, image on the right 2nd row: Image on the left, text on the right 3rd row: Text on the left, image on the right 4th row: Image on the left, text on the right

And it goes on and on!

It's looking very nice on large devices but then when it shows on device, it logically adapts as if the pictures go one after another!

I would like on mobile to always go : Up = Text, down = image instead of variations.

Here is the code for two rows:

                  <!-- FIRST ROW -->
      <div class="row border-marine margin-bottom">
          <div class="col-lg-6 text-center">
            <h2 class="padding-bottom-large">Réfection de toiture</h2>
            <p>Que ce soit un toit de bardeau, de tôle ou à faible pente, Toitures l & l saura
            vous satisfaire</p>
          </div>
          <div id="no-padding" class="col-lg-6">
            <img src="assets/img/toiture.png" class="img-responsive" alt="">
          </div>
        </div>
                 <!-- SECOND ROW -->
        <div class="row border-marine margin-bottom">
          <div id="no-padding" class="col-lg-6">
            <img src="assets/img/ventilation.png" class="img-responsive" alt="">
          </div>
          <div class="col-lg-6 text-center">
            <h2 class="padding-bottom-small">Ventilation de toiture</h2>
            <p>Ayant effectué une centaine de travaux de ventilation de toiture, Toitures L & L
            possède les connaissances et l'expérience nécessaire à l'aération de votre toiture.</p>
          </div>
        </div>

How it looks on a large media device

How it looks on a mobile device

Cheers guys!!

Answer 1

Assuming you are using Bootstrap 4 (which is the current version of Bootstrap), you're using flexbox under the hood. That means you can simply lay out the content in the way you would like it to appear for mobile sites in the DOM (writing out the text before the image in the HTML), and then make use of flex-direction: row-reverse for the rows that you wish to have the image appear on the left for desktop views. To get really fancy, you can apply this to .row:nth-of-type(even) (or odd) to invert every second row.

This can be seen in the following:

.row:nth-of-type(even) {
  flex-direction: row-reverse;
}

<!-- BOOTSTRAP REFERENCES -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- FIRST ROW -->
<div class="row border-marine margin-bottom">
  <div class="col-lg-6 text-center">
    <h2 class="padding-bottom-large">Réfection de toiture</h2>
    <p>Que ce soit un toit de bardeau, de tôle ou à faible pente, Toitures l & l saura vous satisfaire</p>
  </div>
  <div class="col-lg-6">
    <img src="http://placehold.it/400" class="img-responsive" alt="">
  </div>
</div>

<!-- SECOND ROW -->
<div class="row border-marine margin-bottom">
  <div class="col-lg-6 text-center">
    <h2 class="padding-bottom-small">Ventilation de toiture</h2>
    <p>Ayant effectué une centaine de travaux de ventilation de toiture, Toitures L & L possède les connaissances et l'expérience nécessaire à l'aération de votre toiture.</p>
  </div>
  <div class="col-lg-6">
    <img src="http://placehold.it/400" class="img-responsive" alt="">
  </div>
</div>

NB: I've removed your no-margin IDs, as these are duplicates, and duplicate IDs are not valid markup. I've also replaced your images with placeholders for the purposes of this demo.

---

Bootstrap 3.3 solution:

Bootstrap 3.3 doesn't have the convenience of flexbox, so instead you'll have to float the columns. To achieve the same effect, what you'll want to do is float the first column (the content) to the right when you want the image displayed on the left, making use of the selector .row:nth-of-type(even) > .col-lg-6:first-of-type.

This can be seen in the following:

.row:nth-of-type(even) > .col-lg-6:first-of-type {
  float: right;
}

<!-- BOOTSTRAP REFERENCES -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- FIRST ROW -->
<div class="row border-marine margin-bottom">
  <div class="col-lg-6 text-center">
    <h2 class="padding-bottom-large">Réfection de toiture</h2>
    <p>Que ce soit un toit de bardeau, de tôle ou à faible pente, Toitures l & l saura vous satisfaire</p>
  </div>
  <div class="col-lg-6">
    <img src="http://placehold.it/400" class="img-responsive" alt="">
  </div>
</div>

<!-- SECOND ROW -->
<div class="row border-marine margin-bottom">
  <div class="col-lg-6 text-center">
    <h2 class="padding-bottom-small">Ventilation de toiture</h2>
    <p>Ayant effectué une centaine de travaux de ventilation de toiture, Toitures L & L possède les connaissances et l'expérience nécessaire à l'aération de votre toiture.</p>
  </div>
  <div class="col-lg-6">
    <img src="http://placehold.it/400" class="img-responsive" alt="">
  </div>
</div>