Bootstrap 4 在较小的显示屏上，侧边栏的一部分位于主内容上方，另一部分位于主内容下方

我有一个两列的引导布局：一个主内容列和一个右边的边栏列

• 在足够大的屏幕上，两个侧边栏div（位于main上方和位于main下方）都将显示在主要内容的右侧

• 在较小的屏幕上，我希望侧边栏的一部分（位于主内容上方），其余部分（位于主内容下方）

在足够大的屏幕上显示预期结果：

Column 1       | Columm 2
-------------- | ---------------------------------------
Main Main Main | Above Main Content or Side (X)
Main Main Main | ---------------------------------------
Main Main Main | Below Main Content or Side

小屏幕上的预期结果：

Above Main Content or Side (X)
---------------------------------
Main Main Main
Main Main Main
Main Main Main
Main Main Main
---------------------------------
Below Main Content or Side

以上主要内容或侧面（X）
主要内容
以上主要内容或侧面（X）
在主要内容或侧面之下

到目前为止，我最糟糕的解决方案是：重复输出（X），一次进入“窄的””-DIV，第二次进入“主屏幕上方””-DIV，然后根据媒体宽度通过css隐藏一个或另一个：

窄{显示：无；}
.overmain{显示：块；}
@介质（最大宽度：800px）{
.show{display:block；}
.overmain{显示：无；}
}

---

您知道不需要重复输出的无脚本解决方案吗？

使用响应显示类（d-md-block）和浮动将内容拉到

md

或更大屏幕的右侧

<div class="row d-md-block">
    <div class="col-md-8 float-left">Main Content</div>
    <div class="col-md-4 float-right order-first">Above Main Content or Side (X)</div>
    <div class="col-md-4 float-right">Below Main Content or Side</div>
</div>

主要内容
以上主要内容或侧面（X）
在主要内容或侧面之下

---

您可以使用

css网格

实现所需的布局

.grid{
显示：网格；
网格模板区域：“主侧顶”
“主侧盖”
“主侧底”；
}
梅因先生{
背景：红色；
网格区域：主；
}
.侧边栏顶部{
背景：蓝色；
网格区域：侧顶；
高度：100px；
}
.侧边栏底部{
背景：绿色；
网格区域：侧底；
高度：100px；
}
@介质（最大宽度：400px）{
.电网{
网格模板区域：“侧顶侧顶”
“主要的”
“侧底侧底”；
}
梅因先生{
高度：200px；
}
.侧边栏顶部，.侧边栏底部{
高度：60px；
}
}

主要
侧边栏顶部
边栏底部