Boostrap - 在第一个断点处将col-md-3拉到col-md-6上方

Question

我有两列：

<div class="col-md-9">
    ...main content here
</div>
<div class="col-md-3">
    ...sidebar content here
</div>

我希望右侧的col-md-3直到第一个断点，然后在较小的视口之后。我玩弄推拉柱子，但无法弄清楚如何正确显示。请指教。

Answer 1

这应该这样做。 Demo

这个想法是顶级div总是突破。由于我们希望顶部div位于正确的位置，我们将其向右推动另一列的偏移量为9.然后我们将底部div拉回3列以将其置于左侧位置。

<div class="col-md-3 col-md-push-9">
    ...sidebar content here
</div>
<div class="col-md-9 col-md-pull-3">
    ...main content here
</div>