組織不同的屏幕尺寸與自舉3網格系統

Question

我有三個div，我需要根據屏幕尺寸進行定位。即時通訊在我的網頁上使用引導程序的網格系統，但我遇到了一個小問題與放置

任何人都可以幫助我完成此？

在此先感謝！

PS：讓我知道是否需要更多細節。

下面是代碼：

<div class="row"> 
<div id="div1" class="col-xs-6 col-sm-12 col-md-8"><h2>Some header text here DIV1</h2></div> 
<div id="div2" class="col-xs-3 col-sm-6 col-md-2"><span>Some span here DIV2</span></div> 
<div id="div3" class="col-xs-3 col-sm-6 col-md-2"><span>Some other span here DIV3</span></div></div> 

小提琴：

Fiddle

和我多麼希望的圖像它的工作：

Answer 1

爲了得到你想要的佈局和秩序，你需要使用帶有pushpull這樣一起築巢..

<div class="row"> 
     <div class="col-md-6 col-md-push-6 col-xs-12"> 
     <div class="row"> 
      <div id="div2" class="col-xs-7">div2</div> 
      <div id="div3" class="col-xs-5">div3</div> 
     </div> 
     </div> 
     <div id="div1" class="col-md-6 col-md-pull-6 col-xs-12">div1</div> 
</div> 

我使用COL單元col-7和col-5爲div 2和3（根據您的圖片），但您可能需要將這些更改爲您想要的那些列的實際單位。

演示：http://bootply.com/jFfCKhkuR3

Answer 2

您需要使用column ordering ，請參閱bootstrap文檔here

在div1中使用col-xs-push-12並因此拉另外兩個div。

這裏有一個small snippet顯示山坳推的作用和拉