Bootstrap Alternating Layout To Stacked In Mobile

I have a basic responsive layout in Bootstrap where the image sits next to the block of text. In the first row the image is on the left, in the second row the image is on the right

Solution 1:

You're looking for something like Nesting Columns : Here is the doc : http://getbootstrap.com/css/#grid-nesting

Bootply : http://www.bootply.com/qsdH9jr70F

Look this code : and specially at col-sm-push-6 and col-sm-pull-6

HTML :

<div class="container">
    <divclass="row feature"><divclass="col-sm-6 col-md-6"><imgsrc="url"class="img-responsive"></div><divclass="col-sm-6 col-md-6"><h1>title</h1><h3>subtitle</h3><p>body</p></div></div><divclass="row feature"><divclass="col-sm-push-6 col-sm-6 col-md-6"><!--   HERE   --><imgsrc="url"class="img-responsive"></div><divclass="col-sm-6 col-sm-pull-6 col-md-6"><!--   HERE   --><h1>title</h1><h3>subtitle</h3><p>body</p></div></div></div>