Vertical sidepaned (large display) > Horzontal (small display)

by greatCar

HTML

<div class="flex-container">
  <header class="panelHeader">Panel Header</header>
  <aside class="panelAside panelAside1">Panel Option 1</aside>
  <aside class="panelAside panelAside2">Panel Option 2</aside>
  <footer class="panelAside3 panelAside">Panel Option 3</footer>
</div>

CSS

.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
}


.flex-container > * {
    padding: 0px;
    flex: 1 100%;
}

.main {
    text-align: left;
    background: cornflowerblue;
}

.panelHeader {background: coral;padding: 20px;}
.panelAside3 {background: lightgreen;}
.panelAside1 {background: moccasin;}
.panelAside2 {background: violet;}
.panelAside {padding: 20px;}
@media all and (max-width: 799px) {
    .panelAside { flex: 1 0px; }
}

@media all and (max-width: 799px) {
    .panelAside1 { order: 1; } 
    .panelAside2 { order: 4; }
    .panelAside3  { order: 3; }
}