Bootstrap - Creating Mobile-adaptation For Reverse Row Pattern

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

Solution 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 --><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"crossorigin="anonymous"><scriptsrc="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"crossorigin="anonymous"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"crossorigin="anonymous"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"crossorigin="anonymous"></script><!-- FIRST ROW --><divclass="row border-marine margin-bottom"><divclass="col-lg-6 text-center"><h2class="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><divclass="col-lg-6"><imgsrc="http://placehold.it/400"class="img-responsive"alt=""></div></div><!-- SECOND ROW --><divclass="row border-marine margin-bottom"><divclass="col-lg-6 text-center"><h2class="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><divclass="col-lg-6"><imgsrc="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 --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /><!-- FIRST ROW --><divclass="row border-marine margin-bottom"><divclass="col-lg-6 text-center"><h2class="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><divclass="col-lg-6"><imgsrc="http://placehold.it/400"class="img-responsive"alt=""></div></div><!-- SECOND ROW --><divclass="row border-marine margin-bottom"><divclass="col-lg-6 text-center"><h2class="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><divclass="col-lg-6"><imgsrc="http://placehold.it/400"class="img-responsive"alt=""></div></div>