style.css
#main {
min-height: 800px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > article {
background: #dddd88;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
#main > nav {
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 1;
order: 1;
}
#main > aside {
background: #cc00ff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
header, footer {
display: block;
min-height: 100px;
background: #ffeebb;
}
@media all and (max-width: 640px) {
#main, #page {
-webkit-flex-flow: column;
flex-flow: column;
flex-direction: column;
}
#main > article, #main > nav, #main > aside {
-webkit-order: 0;
order: 0;
}
#main > nav, #main > aside, header, footer {
min-height: 50px;
max-height: 50px;
}
}