On smaller displays show one part of the sidebar above and a second part below the main content

问题

I have a two-column bootstrap layout: a main content column and a sidebar column on the right.

On big enough screens, both sidebar DIVs (abovemain and belowmain) are to be shown to the right of the main content.
On smaller screens, I want one part of the sidebar (abovemain) to be displayed above the main content, the rest of it (belowmain) below the main content.

Expected Result on a big enough screen:

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

Expected Result on a small screen:

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>

My terrible solution so far: repeating the output (X), one time into the "narrow"-DIV, a second time into the "abovemain"-DIV, then hide one or the other by css according to the media-width:

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

Do you know a no-script-solution where the output doesn't have to be repeated?

回答1:

You can use css grid to achieve your desired layout

.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>

回答2:

Use the responsive display classes (d-md-block) and floats to pull the content to the right side on md and larger...

<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

来源：https://stackoverflow.com/questions/57528170/on-smaller-displays-show-one-part-of-the-sidebar-above-and-a-second-part-below-t

标签

bootstrap-4