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

Question

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

• 在足够大的屏幕上，两个侧边栏 DIV（abovemain 和 belowmain）都将显示在主要内容的右侧。

• 在较小的屏幕上，我希望侧边栏的一部分（abovemain）显示在主要内容上方，其余部分（belowmain）显示在主要内容下方。

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

Column 1       | Column 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），一次进入“narrow”-DIV，第二次进入“abovemain”-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