Bootstrap 3: Reorder stacked columns on mobile screens

Question

I'm trying to create one of those features pages that Google uses everywhere. On a desktop browser, it would alternate between image and text (on the first row, it's image then text; one the next row it's text then image).

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

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

Here's 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 that will solve your problem.