¿Tienes un tema que en modo responsive te mueve la barra lateral al final?, en este artículo aprenderemos cómo cambiar este comportamiento de manera simple usando código.
Resultado Final
Al final lo que queremos obtener es algo similar a lo que se muestra en la siguiente imagen, como se muestra en la imagen hay filtros de productos de WooCommerce que deberían mostrarse antes del contenido.
Estructura del tema
Lo primero será detectar la estructura del tema que usas, deberías tener una estructura HTML como la siguiente:
<div class="container">
<div class="content"></div>
<div class="sidebar"></div>
</div>
Código CSS para cambiar el orden de los elementos
Básicamente se trata de agregar un media query para que sólo tenga efecto en móviles y luego agregar código al contenedor.
Por ejemplo en base a la estructura HTML anterior:
@media (max-width:768px){
.container{
display: flex;
flex-direction: column-reverse;
}
}
En el código anterior:
- Volvemos flex al container
- Cambiamos el orden de los elementos del contenedor
Conclusión
Si el tema que usas tiene una barra lateral, puedes cambiar la posición en la que esta barra aparece en modo móvil, en este artículo hemos visto cómo cambiar esto de manera simple a través de código CSS.
¿Aún con dudas?, en el siguiente video se detalla cómo usar el código CSS con un ejemplo real.
Artículos Relacionados
(1 votos, promedio: 5,00 de 5)
Cargando...