Make vertical reordering of cells in grid system work responsively
<p>I've got this layout:</p>

<pre><code>+--X---------------+--Y---+
|                  |  A   |
|                  + ---- +
|                  |  B   |
+------------------+------+
</code></pre>

<p>with <code>X = #main-col</code> and <code>Y = #plugin-col</code> and <code>A</code> and <code>B</code> being <code>.plugin</code>:</p>

<pre><code>&lt;div class="row"&gt;
  &lt;div class="col-md-9" id="main-col"&gt;…&lt;/div&gt;
  &lt;div class="col-md-3" id="plugin-col"&gt;
    &lt;div class="plugin"&gt;A&lt;/div&gt;
    &lt;div class="plugin"&gt;B&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Now I'm using this JavaScript:</p>

<pre><code>$('#main-col').toggleClass('col-md-9 col-md-12');
$('#plugin-col').toggleClass('col-md-3 col-md-12 row');
$('#plugin-col .plugin').toggleClass('col-md-3');
</code></pre>

<p>to achieve this layout:</p>

<pre><code>+--X----------------------+
|                         |
|                         |
|                         |
+------+------+-----------+
|  A   |  B   |
+------+------+
</code></pre>

<p>Is there a way to achieve the horizontal &lt;-> vertical reordering of the A &amp; B cells automatically and responsively when the browser window shrinks between a certain width? </p>