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
    order: 1;
20
  }
21
  #main > nav,
22
  #main > aside {
23
    flex: 0 0 20vw;
24
  }
25
  #main > nav {
26
    background: #D7E8D4;
27
    order: 3;
28
  }
29
  #main > aside {
30
    background: beige;
31
    order: 2;
32
  }
33
  header, footer {
34
    background: yellowgreen;
35
    height: 20vh;
36
  }
37
  header, footer, article, nav, aside {
38
    padding: 1em;
39
  }
40
</style>
41
<body>
42
  <header>Header</header>
43
  <div id="main">
44
    <article>Article</article>
45
    <nav>Nav</nav>
46
    <aside>Aside</aside>
47
  </div>
48
  <footer>Footer</footer>
49
</body>