Twitter bootstrap 如何使Bootstrap 4 cols在特定屏幕尺寸下保持水平？

请参阅下图，了解我试图通过Bootstrap4获得的不同屏幕大小的布局。在768px及更宽的屏幕上，边栏小部件位于右侧。比576px更窄，小部件的堆栈类似于标准引导4。但是在576px和769px之间，我可以使用什么样的

col

大小组合或顺序来让小部件并排排列

.widget{
高度：100px；
边框：1px实心#000；
文本对齐：居中；
}
.widget3{
高度：150像素；
边框：1px实心#000；
文本对齐：居中；
}
.内容{
边框：1px实心#000；
文本对齐：居中；
高度：500px；//仅此演示的固定高度
}

内容
小部件1
小部件2
小部件3
小部件4

试试这个

内容
Widget1
Widget2
寡妇3
寡妇4

乍一看，这应该很容易做到。

<div class="container py-2">
<div class="row">
    <div class="col-md-9 col-sm-12"> Content </div>
    <div class="col-md-3  col-sm-12">
        <div class="row">
            <div class="col-md-12  col-sm-6"> Widget1 </div>
            <div class="col-md-12  col-sm-6"> Widget2 </div>
            <div class="col-md-12  col-sm-6"> Widget3 </div>
            <div class="col-md-12  col-sm-6"> Widget4 </div>
        </div>
    </div>
</div>