Cambio de orden de elementos en plantilla responsive

Aquí aportamos un par de ejemplos para re-ordenar elementos en una plantilla responsive. A caminar se aprende andando:

El primer ejemplo es para elementos mostrados en distribución de elementos horizontales (filas de elementos) y se puede utilizar 1, el comportamiento de una tabla, para mostrar elementos como cabecera de tabla, pie de tabla, etc y 2, utilizando Flex, cuando tenemos que ordenar más de 4 elementos.

http://codepen.io/querol_en/pen/LwtAF/

El segundo ejemplo es para elementos que se muestran en una distribución vertical (columnas de elementos), en éste caso, podemos utilizar float para dos elementos y flex cuando se trata de varias cajas:

http://codepen.io/querol_en/pen/ftxbl