Taher Jodhpurwala Taher Jodhpurwala - 1 year ago 180
CSS Question

Convert a flexbox grid to stacked with different order

I need to achieve the following responsive layout :

enter image description here

Here is the code I have for Desktop devices :



.container {
background-color: red;
display: flex;
}

.sidebar-wrapper {
@media only screen and (min-width: 600px) {
width: 264px;
padding-right: 30px;
}
}

.sidebar-header {
padding: 20px;
background-color: #1CA4FC;
}

.sidebar-footer {
padding: 20px;
background-color: #65D643;
}

.site-content {
padding: 20px;
background-color: #F7B92B;
width: calc(100%);
}

<div class="container">
<div class="sidebar-wrapper">
<div class="sidebar-header">
Sidebar Header
</div>
<div class="sidebar-footer">
Sidebar Footer
</div>
</div>
<div class="site-content">
Site Content
</div>
</div>





How do I create a fluid layout for mobile devices where the flexbox ordering is as per the image above?

Answer Source

Given the div structure, I would do it like this:

.container {
  background-color: red;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 20px;
  background-color: #1ca4fc;
}

.sidebar-footer {
  padding: 20px;
  background-color: #65d643;
}

.site-content-mobile {
  padding: 20px;
  background-color: #f7b92b;
}

.site-content {
  display: none;
}

@media (min-width: 787px) {
  .container {
    flex-direction: row;
  }
  .site-content-mobile {
    display: none;
  }
  .site-content {
    display: block;
    width: calc(100%);
    padding: 20px;
    background-color: #f7b92b;
  }
}
<div class="container">
  <div class="sidebar-wrapper">
    <div class="sidebar-header">
      Sidebar Header
    </div>
    <div class="site-content-mobile">
      Site Content
    </div>
    <div class="sidebar-footer">
      Sidebar Footer
    </div>
  </div>
  <div class="site-content">
    Site Content
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download