JSFiddle - React, Tailwind, and code Playground

by dsheiko

HTML

<div class="flex-container">
    <header id="header">Header</header>
    <article class="article">Article</article>
    <aside class="sidebar sidebar1">Sidebar</aside>
    <aside class="sidebar sidebar2">Sidebar</aside>
    <footer id="footer">Footer</footer>
  </div>
</body>

CSS

.flex-container {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
}

#header, #footer {
  background: rgb(173, 194, 226);
  width: 100%;
}
#header {
  order: 1;
}
#footer {
  order: 5;
}
.article {
  order: 3;
  flex: 1 60%;
  background: rgb(255, 255, 204);
}
.sidebar {
  flex: 1 20%;
}
.sidebar1 {
  order: 2;
  background: rgb(255, 204, 204);
}
.sidebar2 {
  order: 4;
  background: rgb(255, 153, 153);
}

@media (max-width : 1024px) {
 .article {
    order: 2;
    flex: 1 100%;
  }
  .sidebar {
    order: 3;
    flex: 1 50%;
  }
  .sidebar2 {
    order: 4;
    flex: 1 50%;
  }
}

@media (max-width : 800px) {
  .sidebar {
    flex: 1 100%;
  }
}