Código HTML:
body {
background: silver;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-family: arial, sans-serif;
margin: 0;
text-align: center;
}
body>* { /** PRUEBAS VISUALES **/
background: white;
box-shadow: 0 0 1px 0 silver;
flex: 1 100%;
padding: 1em 0;
}
nav {
display: inherit;
justify-content: space-around;
a {
color: #333;
text-decoration: none;
}
}
@media all and (min-width: 601px) {
header, nav, aside { flex: 1 auto; }
header {width: 20%;}
nav {width: 80%;}
}
@media all and (max-width: 600px) {
nav { order: 2; }
footer { order: 1; }
}
@media all and (min-width: 801px) {
main { flex: 3 0px; }
header { order: 1; }
nav { order: 2; }
.aside1 { order: 3; }
main { order: 4; }
.aside2 { order: 5; }
footer { order: 6; }
}