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

Question

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

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

我可以直观地表示为：

当前存在问题的情况：https://i.stack.imgur.com/serlN.png

我要：https://i.stack.imgur.com/fFDqm.png

我的代码是：

<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时，我希望边栏下降。像这样：

示例1：https://i.stack.imgur.com/STf8X.png

Example2：https://i.stack.imgur.com/dgnP2.png

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