Controlling bootstrap row order in mobile only - html

Question

I have some simple html at this fiddle that shows the the following in a wide desktop (simple row stuff and this is the desired behavior I want):
Here is the code that produces the above output:
<div class="container">
<div class="row">
<div class="col-md-4"><img class="img-responsive" src="http://placehold.it/800x400"></div>
<div class="col-md-8">
<h1>Random decisions for emacs, with functions and a minor mode.</h1>
<p>Random decisions for emacs, with functions and a minor mode.
Roll various types of dice, generate random numbers from
</p>
</div>
</div>
In mobile (when I reduce the width of the page), I see this:
What I want to see instead is the header ("Random decisions..") show up above the pic in mobile only (Do not want to change anything in the desktop). It seems like I am changing the order of the rows in mobile, but I would like some direction on how I could go about doing this in a clean fashion.

Answer 1

Flexbox can do that.
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
#media (max-width: 768px) {
.row {
display: flex;
flex-direction: column;
}
.top {
order: 2;
}
.bottom {
order: 1;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4 top">
<img class="img-responsive" src="http://placehold.it/800x400">
</div>
<div class="col-md-8 bottom">
<h1>Random decisions for emacs, with functions and a minor mode.</h1>
<p>Random decisions for emacs, with functions and a minor mode. Roll various types of dice, generate random numbers from
</p>
</div>
</div>
Or even easier (no order values required). This just reverses the order.
#media (max-width: 768px) {
.row {
display: flex;
flex-direction: column-reverse;
}
}
Codepen Demo

Answer 2

You can use Bootstraps Push/Pull classes. You need to reorder your content so your image is second in your stack (Bootstrap is mobile first) so when on mobile your image starts below the header then shifts to the left as you expand the viewport.
See Column Reordering
Working Example;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-4">
<h1>Random decisions for emacs, with functions and a minor mode.</h1>
<p>Random decisions for emacs, with functions and a minor mode. Roll various types of dice, generate random numbers from
</p>
</div>
<div class="col-md-4 col-md-pull-8">
<img class="img-responsive" src="http://placehold.it/800x400">
</div>
</div>
</div>

Answer 3

You can achieve this with bootstrap's col-**-push-* and col-**-pull-* classes. The trick is to reverse the order of the elements (like you want to see on mobile in this instance) and "push" the first element and "pull" the second by the number of columns the other element is assigned. Here, you'd place the col-md-8 div on TOP, adding a col-md-push-4 class to it, and conversely add a col-md-pull-4 to the (now) second div.

Answer 4

Here is what worked for me. I accepted #vanburen answer since that is what led me to this..
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-4">
<h1>Random decisions for emacs, with functions and a minor mode.</h1>
</div>
<div class="col-md-4 col-md-pull-8">
<img class="img-responsive" src="http://placehold.it/800x400">
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<p>Random decisions for emacs, with functions and a minor mode. Roll various types of dice, generate random numbers from</p>
</div>
</div>
</div>