在较小的显示器上，在主要内容下方显示侧边栏的一部分，在主要内容下方显示第二部分

Question

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

• 在足够大的屏幕上，两个侧边栏 DIV(主上方和主下方(将显示在主要内容的右侧。

在较小的屏幕上，我希望侧边栏的一部分(在主上方(显示在主要内容

• 上方，其余部分(在主内容下方(显示在主要内容下方。

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

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

<div class="row">
<div class="col-md-12 narrow">Above Main Content or Side (X)</div>
<div class="col-md-8">Main Content</div>
<div class="col-md-4">
<div class="abovemain">Above Main Content or Side (X)</div>
<div class="belowmain">Below Main Content or Side</div>
</div>
</div>

到目前为止，我糟糕的解决方案：重复输出 (X(，一次进入">窄"-DIV，第二次进入">上方"-DIV，然后根据媒体宽度通过 css 隐藏一个或另一个：

.narrow { display:none; }
.abovemain { display:block; }
@media (max-width: 800px) {
.narrow { display:block; }
.abovemain { display:none; }
}

您是否知道无需重复输出的无脚本解决方案？

Answer 1

您可以使用css grid来实现所需的布局

.grid {
display: grid;
grid-template-areas: "main main main sidetop"
"main main main sidetop"
"main main main sidebottom";
}
.main {
background: red;
grid-area: main;
}
.sidebar-top {
background: blue;
grid-area: sidetop;
height: 100px;
}
.sidebar-bottom {
background: green;
grid-area: sidebottom;
height: 100px;
}
@media (max-width: 400px) {
.grid {
grid-template-areas: "sidetop     sidetop   sidetop"
"  main        main      main"
"sidebottom sidebottom sidebottom";
}

.main {
height: 200px;
}

.sidebar-top, .sidebar-bottom {
height: 60px;
}
}

<div class="grid">
<div class="main">Main</div>
<div class="sidebar-top">sidebar top</div>
<div class="sidebar-bottom">sidebar bottom</div>
</div>

Answer 2

使用响应式显示类 (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>

https://www.codeply.com/go/guHhCc51o6