Controlling bootstrap row order in mobile only
<p>I have some simple html at <a href="https://jsfiddle.net/DTcHh/" rel="nofollow noreferrer">this fiddle</a> that shows the the following in a wide desktop (simple row stuff and this is the desired behavior I want):</p>

<p><img src="https://i.stack.imgur.com/TlqXk.png" alt="sdf"></p>

<p>Here is the code that produces the above output:</p>

<pre><code>&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;div class="col-md-4"&gt;&lt;img class="img-responsive" src="http://placehold.it/800x400"&gt;&lt;/div&gt;
&lt;div class="col-md-8"&gt;
        &lt;h1&gt;Random decisions for emacs, with functions and a minor mode.&lt;/h1&gt;
        &lt;p&gt;Random decisions for emacs, with functions and a minor mode.
    Roll various types of dice, generate random numbers from
    &lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>In mobile (when I reduce the width of the page), I see this:</p>

<p><img src="https://i.stack.imgur.com/joA7Zm.png" alt="mobile"></p>

<p>What I want to see instead is the header ("Random decisions..") show up above the pic in <strong>mobile</strong> 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.</p>