自舉沒有發生 - 在右邊的塊上方右上方的div Div響應小型設備

Question

我正在使用Bootstrap主題。我有一個產品頁面，裏面有Left和Right block div。嘗試在屏幕大小調整時將左側塊上方的右側塊div推出。請參閱我已完成以下代碼更新和更改，但我沒有得到實際結果。

原文：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> 

任何人都知道爲什麼右塊不堆上方屏幕大小調整時的左邊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> 

Answer 2

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-9 col-xs-6"> 
 
     LEFT BLOCK 
 
    </div> 
 

 
    <div class="col-sm-3 col-xs-6"> 
 
     RIGHT BLOCK 
 
    </div> 
 
    </div> 
 
</div>

您是否需要這樣的事？如果是這樣，只是col-xs-6是綽綽有餘。