引導右拉式堆DIV在一起時圖，移動設備

Question

考慮代碼

<div class="container"> 

<div class="row"> 
    <div id="right" class="span4 pull-right"> right </div> 
    <div class="span8"> left </div> 
</div> 

</div> 

和CSS

#left { 
    background-color:red; 
} 

當視圖在移動設備中或與窄屏幕，左DIV是下右邊的DIV（很好）但背景色是從右邊DIV開始的，看附件

那麼如何讓紅色背景只有ap梨在底部？

的jsfiddle：http://jsfiddle.net/6F4dg/

Answer 1

#left { 
    background-color:red; 
} 

#right { 
    float: none; 
    clear: both; 
} 

禁用浮動和清除這兩個，#right將在頂部和#left在紅色背景的底部。

Answer 2

你不能分開divs並嘗試。

<div class="container"> 
    <div class="row"> 
     <div class="pull-right"> 
      <div id="right" class="span4">right</div> 
     </div> 
     <div class="pull-left"> 
      <div id="left" class="span8">left</div> 
     </div> 
    </div> 
</div> 

的jsfiddle：Updated Code

Answer 3

您正在使用引導2班，我建議你升級你的項目來引導3，具有各種顯示尺寸的網格類，並允許您指定列應該如何表現取決於在顯示器尺寸上。

所以你可以做這樣的事情（Demo here）：

<div class="container"> 
    <div class="row"> 
    <div id="right" class="col-xs-4 col-lg-4">right</div> 
    <div id="left" class="col-xs-8 col-lg-8">left </div> 
    </div> 
</div> 

凡col-lg-8和col-lg-4是桌面和 col-xs-8和col-xs-4是小德維 CES

見http://getbootstrap.com/css/#grid瞭解更多信息。