Bootstrap 3 RC1: Column Ordering <p>I have two primary boxes: an 8-col wide box with a bunch of panels and a second, 4-col (offset-1) to the right as a sidebar.</p> <p>I want to push the sidebar on top of the box o' sidebars on small screens. I've tried applying <code>col-12 col-push-12</code> (panel box) and <code>col-12 col-pull-12</code> (sidebar box) without any luck. I also want to ensure the sidebar is "centered" (i.e. as if it was col-offset-4 col-4) on the grid when it's pushed up top as well.</p> <p>I've also noticed some movement (open issues) on the Bootstrap repo over at GitHub regarding some of this behaviour, but I might just be conflating things.</p> <pre><code>&lt;div class="container content"&gt; &lt;div class="row"&gt; &lt;div class="col-lg-8 col-12"&gt; &lt;div class="panel listing"&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;div class="col-sm-4 col-sm-offset-4 col-lg-3 col-lg-offset-1 col-12"&gt; &lt;div class="sidebar"&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Above is the "vanilla" code as it stands right now: what do I need to do to get the sidebar above on mobile and tablet?</p> <p><strong>Update</strong>: It appears the accepted answer/implementation no longer works due to some commits (given that "RC1" isn't what I'd call an RC!) today: <a href="https://github.com/twbs/bootstrap/commits/3.0.0-wip" rel="nofollow">https://github.com/twbs/bootstrap/commits/3.0.0-wip</a></p> <p>If anyone has an updated answer I'd appreciate it.</p>