Issue with push/pulling my layout

Question

I have a simple layout, with a sidebar (col-3) and content (col-9)

[3] [9]

I'm trying to get it so at xs side my layout is

[Content]
[Sidebar]

So I tried adding col-xs-push-12 to the sidebar and col-xs-pull-12 to the content, however, with that at any size screen everything disappears.

My HTML is set up like

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 col-xs-push-12" id="globalSidebar">
    ...
</div>


<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 col-xs-pull-12" id="mainContent">
       ...
</div>

I've seen this question which is where I got the push/pull from, but it didn't seem to work.

Is this something I can do in just bootstrap or will I need to do something else to achieve this?

Answer 1

If you think "mobile-first", and use the push/pull for the larger screen widths, it should work like this..

<div class="col-sm-9 col-sm-push-3" id="mainContent">
    content
</div>
<div class="col-sm-3 col-sm-pull-9" id="globalSidebar">
    sidebar
</div>

Demo