Bootstrap not happening - Push Right block Div above Left Block on responsive small device
<p>I'm working on a Bootstrap theme. I have a product page where there is Left and Right block div. Trying to push the right block div above the left block when the screen resizes. Please see i have done the following code updates and changes, however i'm not getting the actual result.</p>

<p>Original: <a href="http://45.55.39.151/magento/porto/index.php/demo11_en/wooden-chair.html" rel="nofollow">Check the actual website here</a></p>

<pre><code>&lt;div class="col-main col-sm-9"&gt;
LEFT BLOCK
&lt;/div&gt;

&lt;div class="col-right sidebar col-sm-3"&gt;
RIGHT BLOCK
&lt;/div&gt;
</code></pre>

<p>Update:</p>

<pre><code>&lt;div class="col-main col-sm-9 col-sm-push-3 col-md-push-0"&gt;
LEFT BLOCK
&lt;/div&gt;

&lt;div class="col-right sidebar col-sm-3 col-sm-pull-9 col-md-pull-0"&gt;
RIGHT BLOCK
&lt;/div&gt;
</code></pre>

<p>What i expect on small device when responsive:</p>

<pre><code>&lt;div class="col-right sidebar col-sm-3 col-sm-pull-9 col-md-pull-0"&gt;
RIGHT BLOCK
&lt;/div&gt;
&lt;div class="col-main col-sm-9 col-sm-push-3 col-md-push-0"&gt;
LEFT BLOCK
&lt;/div&gt;
</code></pre>

<p>Anyone know why the Right block doesn't stack above the Left Div when the screen resizes? This theme uses Bootstrap 3+. Column ordering should work in Bootstrap right? </p>

<p>Thanks, need some inputs, i'm still trying my hands on CSS.</p>