Permutar el orden de elementos con display: table y asociadas 27.6.16
Cambiar el orden de visualización en pantalla respecto a su aparición en el DOM se puede hacer con la propiedad Css 'order' del flexbox. Pero es más divertido usar la imaginación y display: table y asociadas.
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.
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 elcaptionse 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
Bueno, ya que me mencionaste pero no publicaste la demo que alguna vez me has corregido, aprovecho el artículo y la publico yo ahora.
ResponderEliminar[pen]data-height="300" data-theme-id="0" data-slug-hash="YPZrGK" data-default-tab="result" data-user="solipsistacp" class='codepen'[/pen]
Cabe aclarar que el código es tuyo, porque mi versión no funcionaba en Chrome; y lo que hace es tomar una tabla previamente ordenada (A→Z) por una de sus columnas para invertir ese orden (Z→A) usando unos radiobutton.
(para que después no me andes llamando "rata".)
;-)