Holy Grail code

Source: http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

HTML

<header>Header</header>
<div class="HolyGrail-body">
    <main class="HolyGrail-content">Content</main>
    <nav class="HolyGrail-nav">Navigation</nav>
    <aside class="HolyGrail-ads">Advertisements</aside>
</div>
<footer>Footer</footer>

CSS

/* Start Holy Grail */
.HolyGrail, .HolyGrail-body {
    display: flex;
    flex-direction: column;
}
.HolyGrail-nav {
    order: -1;
}
@media (min-width: 768px) {
    .HolyGrail-body {
        flex-direction: row;
        flex: 1;
    }
    .HolyGrail-content {
        flex: 1;
    }
    .HolyGrail-nav, .HolyGrail-ads {
        /* 12em is the width of the columns */
        flex: 0 0 12em;
    }
}
/* End Holy Grail */
header, footer, main, nav, aside {
    border: 1px solid black;
    text-align: center;
}
header {
    background-color: red;
}
footer {
    background-color: green;
}
main {
    background-color: grey;
}
nav {
    background-color: yellow;
}
aside {
    background-color: magenta;
}