Tengo el siguiente código simple:
<div id="wrapper"> <div id="header"><!-- Contenido... --></div> <div id="main_content"> <div class="left_content"><!-- Contenido... --></div> <div class="sidebar"><!-- Contenido... --></div> </div> <div id="footer"><!-- Contenido... --></div> </div>
El tema es el siguiente: tal y como se ve en el código y en tamaño móvil, el div con clase left_content se mostraría primero y el div con clase sidebar se mostraría a continuación, ambos en bloque uno debajo de otro, como es lógico.
Me han propuesto que, sin tocar el código HTML, esto es, solo pudiendo modificar el archivo CSS y JS conseguir que en tamaño móvil el div con clase "sidebar" se muestre el primero.
No hay Bootstrap, solo un archivo CSS y la librería jQuery con la que, en principio, se podría copiar esa capa, hacer un "prepend" y removerla del final, pero, ¿con CSS es posible conseguir lo mismo?
Gracias de antemano.
Respuestas
Aunque no puedes usar Bootstrap, sí que puedes aplicar en tu CSS los mismos estilos que usa Bootstrap para resolver este problema. De hecho, reordenar columnas con Bootstrap es facilísimo.
Si quieres un ejemplo real, en la portada del foro de este sitio puedes ver que en la lista de discusiones, reordeno la posición del contador de respuestas mediante el col-md-push-2 y col-md-pull-10. Sólo tendrías que aplicar la misma técnica con las propiedades left y right de CSS.
@javiereguiluz
Bien, la idea está bien, pero es en tamaño móvil donde quiero conseguir que ambas ocupen el 100% y la segunda se muestre por encima de la primera y no lo consigo ver cómo se podría hacer...
@ucip3
Un truco alternativo que acabo de descubrir en esta respuesta de Stack Overflow sería el siguiente:
#main_content { display: table; } #left_content { display: table-footer-group; } #sidebar { display: table-header-group; }
@javiereguiluz
Redondo!! Ha funcionado perfecto!! Muchas gracias!!
@ucip3
Otra solución en CSS3 que también funciona de lujo:
#main_content { display: flex; flex-direction: column; } #left_content { order: 2; } #sidebar { order: 1; }
Por si os es de ayuda también.
@ucip3