Bootstrap 3: reordering columns on mobile screens

Question

I'm trying to create one of those feature pages that Google uses everywhere. In a desktop browser, it will alternate between the image and the text (the first line is the image, then the text, and the next line is the text, then the image).

However, on mobile screens, I need to make sure that the image always precedes the text (since it provides context). Here is an illustration:

I tried using the col-md-pull and col-md-push Bootstrap functions to reorder them on mobile screens, but that didn't work.

Here is my code .. What am I doing wrong?

 <div class="container"> <div class="row"> <div class="col-md-4"><img src="..."></div> <div class="col-md-8">Feature 1 ...</div> </div> <div class="row"> <div class="col-md-8 col-md-push-4">Feature 2 ...</div> <div class="col-md-4 col-md-pull-4"><img src="..."></div> </div> </div> 

Answer 1

Please refer to this jsfiddle

 <div class="container"> <div class="row"> <div class="col-md-4"> <img data-src="holder.js/100px150?bg=F3C40F"> </div> <div class="col-md-8"> <h1>Feature 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, debitis, reiciendis, repudiandae, placeat recusandae maxime fugiat explicabo voluptatem omnis commodi molestiae assumenda repellendus. Sequi, id ducimus cumque dolore ipsum beatae?</p> </div> </div> <div class="row"> <div class="col-md-4 col-md-push-8"> <img data-src="holder.js/100px150?bg=F3C40F"> </div> <div class="col-md-8 col-md-pull-4"> <h1>Feature 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, voluptatum, aut, eius, ut sunt quod quia maiores eos deleniti provident delectus dicta facere eum quasi harum esse aspernatur! Quas, cumque.</p> </div> </div> 

I think this will solve your problem.

Answer 2

Change the order of the HTML for the second .row (put the image above function two):

 <div class="container"> <div class="row"> <div class="col-md-4"> <img src="http://lorempixel.com/200/200"> </div> <div class="col-md-8">Feature 1 ...</div> </div> <div class="row"> <div class="col-md-4 col-md-push-4"> <img src="http://lorempixel.com/200/200"> </div> <div class="col-md-8 col-md-pull-4">Feature 2</div> </div> </div> 

Updated example: http://jsfiddle.net/52VtD/5839/