css - Bootstrap 未发生 - 在响应式小型设备上将右 block Div 推到左 block 上方

Question

我正在开发一个 Bootstrap 主题。我有一个产品页面，其中有左右 block div。当屏幕调整大小时，尝试将右侧 block div 推到左侧 block 上方。请参阅我已完成以下代码更新和更改，但我没有得到实际结果。

原文:Check the actual website here

<div class="col-main col-sm-9">
LEFT BLOCK
</div>

<div class="col-right sidebar col-sm-3">
RIGHT BLOCK
</div>

更新:

<div class="col-main col-sm-9 col-sm-push-3 col-md-push-0">
LEFT BLOCK
</div>

<div class="col-right sidebar col-sm-3 col-sm-pull-9 col-md-pull-0">
RIGHT BLOCK
</div>

响应时我对小型设备的期望:

<div class="col-right sidebar col-sm-3 col-sm-pull-9 col-md-pull-0">
RIGHT BLOCK
</div>
<div class="col-main col-sm-9 col-sm-push-3 col-md-push-0">
LEFT BLOCK
</div>

有人知道为什么当屏幕调整大小时 Right block 没有堆叠在 Left Div 之上吗？这个主题使用 Bootstrap 3+。列排序应该在 Bootstrap 中工作，对吗？

谢谢，需要一些输入，我仍在尝试 CSS。

Answer 1

请看这个sample :

<div class="container">
<div class="row">
<div class="col-xs-4">Menu</div>
<div class="col-xs-8">
  <div class="row">
    <div class="col-md-4 col-md-push-8">Right Content</div>
    <div class="col-md-8 col-md-pull-4">Content</div>
  </div>
</div>