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