JSFiddle - React, Tailwind, and code Playground

by dsheiko

HTML

<body>
  <div id="view">
    <header id="header">Header</header>
    <aside class="sidebar region1"></aside>
    <article class="article">Article</article>
    <aside class="sidebar region2"></aside>
    <aside class="sidebar region3"></aside>
    <footer id="footer">Footer</footer>
  </div>
  <div id="sidebar-sources">
    <aside class="sidebar1">Sidebar</aside>
    <aside class="sidebar2">Sidebar</aside>
  </div>
</body>

CSS

#view > * {
  display: inline-block;
  float: left;
  text-align: center;
}
#header, #footer {
  background: rgb(173, 194, 226);
  width: 100%;
}

.article {
  background: rgb(255, 255, 204);
  width: 60%;
}

#view > .region1,
#view > .region2 {
  background: rgb(255, 204, 204);
  width: 20%;
}
#view > .region1 {
  -webkit-flow-from: region1;
      -ms-flow-from: region1;
}
#view > .region2 {
  -webkit-flow-from: region2;
      -ms-flow-from: region2;
}
#view > .region3 {
  -webkit-flow-from: region3;
      -ms-flow-from: region3;
  background: rgb(255, 153, 153);
  width: 20%;
}

#view > .region2 {
  display: none;
}
#sidebar-sources {
  text-align: center;
}
#sidebar-sources .sidebar1 {
  -webkit-flow-into: region1;
      -ms-flow-into: region1;
}
#sidebar-sources .sidebar2 {
  -webkit-flow-into: region3;
      -ms-flow-into: region3;
}

@media (max-width : 1024px) {
  #view > .article {
    width: 100%;
  }
  #view > .region3 {
    width: 50%;
  }
  #view > .region2 {
    display: inline-block;
    width: 50%;
  }
  #view > .region1 {
    display: none;
  }
  #sidebar-sources .sidebar1 {
    -webkit-flow-into: region2;
        -ms-flow-into: region2;
  }
}

@media (max-width : 800px) {
  #view > .region3 {
    width: 100%;
  }
  #view > .region2 {
    width: 100%;
  }
}