1
<!doctype html>
2
<title>Example</title>
3
<style>
4
  * {
5
   box-sizing: border-box;
6
  }
7
  body {
8
    margin: 0;
9
  }
10
  #main {
11
    display: flex;
12
    min-height: calc(100vh - 40vh);
13
  }
14
  #main > article {
15
    flex: 1;
16
  }
17
  #main > nav,
18
  #main > aside {
19
    flex: 0 0 20vw;
20
    background: beige;
21
  }
22
  #main > nav {
23
    order: -1;
24
  }
25
  header, footer, article, nav, aside {
26
    padding: 1em;
27
  }
28
  header, footer {
29
    background: yellowgreen;
30
    height: 20vh;
31
  }
32
</style>
33
<body>
34
  <header>Header</header>
35
  <div id="main">
36
    <article>Article</article>
37
    <nav>Nav</nav>
38
    <aside>Aside</aside>
39
  </div>
40
  <footer>Footer</footer>
41
</body>