css - 强制进行不规则的 Bootstrap 列/行换行

Question

我有一个典型的网格布局，如附件所示:

我有 2 行 - 一行包含小部件/标题列，另一行包含侧边栏和内容。我这样做是为了在不通过 CSS 指定高度的情况下保持小部件和标题高度相同且响应迅速。

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

我可以做到这一点，但在我看来，也许目前有一个更优雅的解决方案让我望而却步。

Answer 1

DEMO

而不是将 widget-header 和 sidebar-content 对放在 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*/
}