JSFiddle - React, Tailwind, and code Playground

by mrberti

HTML

<header>header</header>
  <main>
    <article>article</article>
    <nav>nav</nav>
    <aside>aside</aside>
  </main>
  <footer>footer</footer>

CSS

html, body { margin:0; padding:0; }
main { display: flex; }
article { order: 2; min-width: 12em; flex:1; }
nav     { order: 1; width: 200px; }
aside   { order: 3; width: 200px; }

@media all and (max-width: 600px) {
  /* Too narrow to support three columns */
  main { flex-flow: column; }
  main > article, main > nav, main > aside {
    /* Return them to document order */
    order: 0; width: auto;
  }
}

header, footer, article, nav, aside {
    background-color: #CCC;
    padding: 10px;
    margin: 5px;
}