How to change bootstrap grid order with full width columns
<p>I'm trying to wrap my head around how to change the order of columns in bootstrap depending on the screen size, but with some full width columns. Without full width columns, it is a simple matter of using push and pull helper classes. I think that perhaps nesting is needed, but I've been staring at this, and it isn't coming to me!</p>

<p><strong>What I want:</strong></p>

<pre><code>MD-LG:

[A][B][D]
[===C===]
</code></pre>

<p>-</p>

<pre><code>SM:

[A] [B]
[==C==]
[==D==]
</code></pre>

<p>-</p>

<pre><code>XS:

[A]
[B]
[C]
[D]
</code></pre>

<p>Here is a jsbin sandbox of what I have going on so far:
<a href="http://jsbin.com/suqefecifi/edit?html,css,output" rel="nofollow">http://jsbin.com/suqefecifi/edit?html,css,output</a></p>

<p>I was hoping that I could just push or pull and have it swap rows, but it seems those helper classes are only designed to change the order of columns within a single row.</p>

<p>I think that best strategy for coming up with a plan for things like this is to START with your XS order...that's the order the HTML needs to be in. From there, use helper classes to take care of the larger sizes. Or is there a better way to approach the problem? I'm looking for a better method than "stare at it and hope for an epiphany!"</p>