Bootstrap 3：如何使用推拉删除内容下方的左侧边栏

Question

我正在使用Bootstrap 3并在移动设备上我想垂直堆叠所有div（侧边栏&内容）并将左侧边栏放置在移动（xs）设备上的主容器（当前位于左侧边栏的右侧）。 HTML中，看起来像这样

<div class="container"> 
<div class="row"> 
    <div class="col-sm-3 col-xs-push-9"> Sidebar</div> 
    <div class="col-sm-9 col-xs-pull-3"> Main Container</div> 
</div> 

上面的问题是，在它们出现在相反的顺序对大（lg）培养基（md）和（sm）设备主容器使用col-xs-push-9上侧栏和col-xs-pull-3。我不想扭转订单，但只想在特小型移动设备上的主容器下方放置左侧边栏。

我想要一个不是JS/jQuery解决方案的引导解决方案。

请帮忙。

问候， DK

Answer 1

如果你认为“移动为先”，布局所需的移动顺序列第一，然后使用推/拉来调整列大屏幕..

<div class="container"> 
<div class="row"> 
    <div class="col-sm-9 col-sm-push-3"> Main Container</div> 
    <div class="col-sm-3 col-sm-pull-9"> Sidebar</div> 
</div> 
</div> 

http://codeply.com/go/8g4UL0J43K

Answer 2

引导继承用于从较小的网格设置的属性较大网格特性。因此，你必须设置推拉为0格比XS大，SM，像这样：

<div class="container"> 
<div class="row"> 
    <div class="col-xs-3 col-xs-push-9 col-sm-push-0"> Sidebar</div> 
    <div class="col-xs-9 col-xs-pull-3 col-sm-pull-0"> Main Container</div> 
</div> 
</div>