强制不规则的Bootstrap列/行换行

Question

我有一个典型的网格布局如下所示：

我有两行 - 一行包含小部件/标题列，另一行包含侧边栏和内容。我这样做是为了保持小部件和标题高度相同，并通过CSS指定高度来响应。

问题是当它包装移动时，我希望标题和内容在底部保持在一起。我可以用两列做一行，然后在每行中嵌套两行，然后我回到指定每个嵌套网格的第一行的高度。

我可以做到这一点，但在我看来，也许有一个更优雅的解决方案让我目前无法逃脱。

Answer 1

DEMO

而不是放widget-header＆amp; 2个单独行中的sidebar-content对＆amp;使用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*/
}