Bootstrap佈局混亂

Question

我知道Bootstrap是第一個設計的移動設備。我想知道只有Bootstrap的CSS類可能的佈局是否可行？上大小col-md或更大

圖A

而當屏幕是col-sm或col-xs，轉到B或C（2個不同的解決方案）。

我正在爲A-> B和A-> C尋找正確的div佈局。

每個部分的高度是隨機的，因爲它們中生成的內容將是動態的。我在div中添加了填充高度，但它們是動態的，無法設置。

下不工作...

小提琴...... https://jsfiddle.net/s4jj30wf/

<div class="row"> 
    <div style="background:blue" class="col-xs-12 col-md-4"> 
     <div style="height:100px"></div> 
    </div> 
    <div style="background:yellow" class="col-md-8 col-xs-12"> 
     <div class="row"> 
      <div style="background:green" class="col-md-12 col-xs-12"> 
       <div style="height:20px"></div> 
      </div> 
      <div style="background:pink" class="col-md-12 col-xs-12"> 
       <div style="height:100px"></div> 
      </div> 
      <div style="background:red" class="col-md-12 col-xs-12"> 
       <div style="height:100px"></div> 
      </div> 
     </div> 
    </div> 
    <div style="background:orange" class="col-md-4 col-md-pull-4 col-xs-12"> 
     <div style="height:50px"></div> 
    </div> 
</div> 

Answer 1

解決方案：根據柱子是靜態高度還是動態高度有兩種方法。如果他們有靜態高度，那麼我們有一個純粹的CSS解決方案，使用float和clear屬性以及margin-top屬性來實現此目的。

樣品純CSS與柱的固定高度：

http://codepen.io/Nasir_T/pen/ZBOgoe

如果高度是不固定的和動態的，然後我們將需要使用jQuery，以動態地殺死調整margin-top財產基於A→B和A→C場景的錯位2個元素之間的差距。我們將使用默認的jquery和modernizr js來實現這個簡單的解決方案。

樣品jQuery的動態柱高度& CSS解決方案：

http://codepen.io/Nasir_T/pen/VmjoPd

希望這有助於。

Answer 2

我想你可能要找的是column ordering在這裏你可以.push-md-和.pull-md-

Answer 3

在文檔中，都是一些元素的流動，你不能隨意混合它們，除非你完全放置它們。

只使用引導類，我認爲如何做到這一點的唯一方法是複製內容 - 您將擁有頁面中的所有A，B和C，並基於屏幕大小顯示您想要的 - 使用類visible-xs ，hidden-sm等 但重複的內容通常不是明智的想法。