Twitter bootstrap 推/拉我的布局有问题

我有一个简单的布局，带有侧栏（第3列）和内容（第9列）

我正试图得到它，所以在xs端我的布局是

[Content]
[Sidebar]

因此，我尝试将

col-xs-push-12

添加到侧栏中，并将

col-xs-pull-12

添加到内容中，但是，在任何大小的屏幕上，所有内容都会消失

我的HTML设置如下

<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>

...
...

我见过一个问题，我是从哪里得到推拉的，但它似乎不起作用

这是我在引导过程中可以做到的，还是我需要做些其他的事情来实现这一点？

如果您认为“移动优先”，并对更大的屏幕宽度使用推/拉功能，它应该是这样工作的

<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>

内容
边栏

<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>