How to change the div col order in Twitter Bootstrap 3

Question

I am trying to change the stack order of the div col's in Twitter Bootstrap in mobile view. I would like the text in col-md-7 to be pulled on top of the image in col-md-5 in mobile view, but when viewing on desktop the div col's stay the same.

Here is the code I am using

  <div class="row featurette">
    <div class="col-md-5">
      <img class="featurette-image img-responsive" src="http://i.imgur.com/O7KC6ak.png" alt="Generic placeholder image">
    </div>
    <div class="col-md-7">
      <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
      <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>
  </div>

Here is a Bootly demo of what I'm trying to accomplish Bootly demo

Answer 1

One kind of ugly way to do this is to think mobile first. Order the columns how you want them to stack for xs/sm, and then use pull and push to reorder them for larger screens. Something like this should work:

  <div class="row featurette">
    <div class="col-md-7 col-md-push-5">
      <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
      <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>
    <div class="col-md-5 col-md-pull-7">
      <img class="featurette-image img-responsive" src="http://i.imgur.com/O7KC6ak.png" alt="Generic placeholder image">
    </div>
  </div>

(I would have tested it, but your demo link just leads to an error message and I'm too lazy to make my own demo.)