Mover barra lateral al inicio en móviles

¿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>

Para localizar la estructura HTML en el tema que usas puedes usar el Inspector de código de tu navegador.

 

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

Para agregar este código puedes revisar: Agregar código CSS en WordPress de manera correcta.

 

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.

Suscríbete a DecodeCMS:  

 

La entrada Mover barra lateral al inicio en móviles es un artículo reciente del sitio DecodeCMS.