強制不規則自舉列/行包裝

Question

我有一個典型的網格佈局如圖所示附：

我有2行 - 一個與所述窗口小部件/報頭列和另一與側邊欄和內容。我這樣做是爲了保持小部件和頭部高度相同，並且無需通過CSS指定高度。

問題是當它爲移動設備打包時，我想讓標題和內容留在底部。我可以做一行兩列，然後在每一行中嵌套兩行，但我回來指定每個嵌套網格的第一行的高度。

我可以做這個工作，但在我看來，也許有一個更優雅的解決方案，目前逃脫我。

Answer 1

DEMO

而不是把 widget-header 雙在 2個獨立的行 &使用 pull & push調整網格的，你可以很容易地把 widget-sidebar在一列& header-content在另一個要解決的問題。

HTML：

<div class="col-sm-6 main"> 
<div class="col-sm-12 a">Widget</div> 
<div class="col-sm-12 a">sidebar</div> 
</div> 
<div class="col-sm-6 main"> 
<div class="col-sm-12 a">header</div> 
<div class="col-sm-12 a">content</div> 
</div> 

CSS：

.a{ /*for demo only*/ 
    height:100px; 
    border:2px solid red; 
} 
.main{ 
    padding:0px; /*for no padding between 2 columns in small devices*/ 
}