<header>header</header>
<div id='main'>
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>footer</footer>
body {
font: 2em Helvetica;
background: #ddd;
color:#666;
}
#main {
min-height: 800px;
margin: 0px;
padding: 0px;
display: flex;
flex-flow: row;
}
#main > article {
flex: 3 1 60%;
order: 2;
}
#main > nav {
flex: 1 6 20%;
order: 1;
}
#main > aside {
flex: 1 6 20%;
order: 3;
}
header, footer {
display: block;
min-height: 100px;
}
header,
#main>article,
#main>aside,
#main>nav,
footer {
margin: .1em;
padding: .2em;
border-radius: 3px;
border: 1px solid #666;
background: white;
}
/* Too narrow to support three columns */
@media all and (max-width: 640px) {
#main, #page {
flex-direction: column;
}
#main > article, #main > nav, #main > aside {
order: 0;
}
#main > nav, #main > aside, header, footer {
min-height: 50px;
max-height: 50px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.