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

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>