Ejemplo Flexbox
<div class="container">
<section class="c1"> Section 1</section>
<section class="c2"> Section 2</section>
<section class="c3"> Section 3</section>
</div>
estilos.css
.container {
display: flex;
display: -webkit-flex;
/* Tipo Fila */
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
}
/* Mobile First */
.c1, .c2, .c3 {
width: 100%;
}
.c1 {
height: 400px;
}
.c2 {
height: 400px;
}
.c3 {
height: 400px;
}
/* Media queries */
@media (min-width: 500px) {
.c1 {
width: 70%;
order: 2;
-webkit-order: 2;
}
.c2 {
width: 30%;
order: 1;
-webkit-order: 1;
}
.c3 {
width: 100%;
order: 3;
-webkit-order: 3;
}
}
@media (min-width: 800px) {
.c2, .c3 {
width: 25%;
}
.c1 {
width: 50%;
}
}