JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <header>header</header>
  <main>content</main>
  <nav>navigation</nav>
  <footer>footer</footer>
</section>

CSS

section {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header, footer, main, nav {
  flex: 1;
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #eebb55;
  background: #ffeebb;
}

@media only screen and (orientation: landscape) {
  section { flex-wrap: wrap; }
  nav { flex-basis: 100%; order: 1 }
}

body { margin: 0; }