Permutar el orden de elementos con display: table y asociadas 27.6.16

Permutar el orden de elementos con display: table y asociadas

A raíz de las pruebas y tanteos que estuve realizando para el artículo From table to tabs pure Css (esto es, pasar a mostrar una tabla como sistema de pestañas o tabs en ventanas estrechas) quedó un aspecto sin incluir o mostraros. Aspecto que primero Furoya mediante mail y posteriormente Wakkos en twitter plantearon.

Ambos, aunque con fines distintos, trataban sobre lo mismo: permutar o cambiar el orden de elementos al mostrarlos respecto a su aparición en el DOM.

Esto hoy día no es mayor problema. Una de las características del flexbox display: flex es que permite cambiar el orden con la propiedad order.

Pero esta posibilidad realmente no es nueva. En la estructura de las tablas, bien como elemento Html o mediante la propiedad Css display: table y asociadas ya está presente desde su concepción.

Algunos elementos de las tablas, como el título (caption o table-caption) así como el encabezado o el pie son susceptibles de mostrarse en pantalla en un lugar diferente al que ocupan en el documento.

Así que aprovechando este detalle, aquí la demo sobre cómo hacerlo cambiando el display de algunos elementos al valor table y sus asociados.

See the Pen Toggle order with display: table by Kseso (@Kseso) on CodePen.

Ver Demo y Redimensiona

Mi sugerencia es que veas la demo directamente en codepen y redimensiones la ventana de visualización para que se produzca la reordenación de los elementos. O aprovechando las nuevas características de los pen embutidos que marques y desmarques la pestaña Html o CSS mientras ves el resultado.

Como podrás ver en el código Html, todo se reduce a un article que contiene, por este orden, una imagen seguida de un h1, un header con 2 span´s y por último un párrafo.

En viewports mayores de 600px todo se muestra de acuerdo a su aparición en el Html. Sólo posiciono el h1 y el header sobre la imagen por una cuestión de estética (position: absolute)

Al llegar el viewport a un valor de 600px o menos y con ayuda de una @media query el article pasa a ser una tabla CSS (display: table), el h1 deviene en table-caption y el header pasa a ser table-footer-group y sus span´s celdas.

Recuerda que el caption se puede cambiar su colocación con la propiedad caption-side.

Otras realizaciones te las dejo a tu imaginación. Pero eso sí, no seas rata y compártelas en los comentarios. Recuerda que puedes incluir pens en ellos.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso