连续引导多个col-md-9和一个col-md-3

Question

我正在使用Bootstrap 4创建Wordpress主题。我被困在某一点。

我创建了5个不同的部分。每个部分可以单独设置大小。用户可以选择截面宽度9/12或12/12。如果宽度设置为9/12，则右侧会自动附带一个侧边栏。我在这里有问题。

当一个以上宽度为9/12的部分到达底部时，侧边栏位于最后一个部分的右侧。

我可以直观地表示为：

IMAGE 1

IMAGE 2

我的代码是：

<div class="row">
  <div class="col-md-9"></div>
  <div class="col-md-9"></div>
  <div class="col-md-9"></div>
  <div class="col-md-3"></div>
</div>

我知道我可以这样做：

<div class="row">
    <div class="col-md-9">
        <div class="row">
            <div class="col-md-12"></div>
            <div class="col-md-12"></div>
            <div class="col-md-12"></div>
        </div>
    </div>

    <div class="col-md-3"></div>
</div>

但是，当用户选择第一部分的宽度为12/12时，我希望边栏下降。像这样：

IMAGE 3

IMAGE 4

有人知道该怎么做吗？ 谢谢大家！