0

tengo el siguiente problema con Bootstrap. Estoy intentando cambiar el orden en que se muestran 2 divs en la vista xs

EL caso es que si pongo order-1 en la segunda columna, y order-2 en la primera si me cambia el orden, pero al aplicarle en la vista que quiero que se muestren esta no cambia.

El codigo que tengo es el siguiente:

    <div class="order-xs-2 col-xs-12 col-sm-12 col-md-4 col-lg-3 col-xl-3">
        <div class="menu">
            <p class="titulo-cat">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae amet a beatae quod atque quia quaerat numquam ea pariatur architecto, fugiat repudiandae, nesciunt adipisci saepe maiores sequi, aut est cupiditate.</p>
            </ul>
        </div>
        <div class="menu menu-2">
            <p class="titulo-cat">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur cupiditate, aliquam. Laboriosam eius a vero cum dolores optio inventore cupiditate possimus porro sunt. Ad ducimus sint minus accusantium sunt, fuga.</p>
        </div>
    </div>
    <div class="order-xs-1 col-xs-12 col-sm-12 col-md-8 col-lg-9 col-xl-9 cont-productos ">
        <div class="row cont">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam facilis sed dolorem sint similique expedita distinctio et illum, magni maiores, non dolorum, debitis doloribus. Repudiandae vitae quaerat reiciendis consequuntur, nobis!</p>
        </div>
    </div>
</div>

¿ Qué estoy haciendo mal ?

1 respuesta 1

0

.order-xs-* no existe, es .order-* para xs (como con casi todas las clases de Bootstrap). Documentación.

Tenés que pensar en mobile first. Tu HTML armalo pensando primero en xs, las clases usalas para modificar como se ve en el resto de los cortes.

<div>
    <div class="order-sm-2 col-xs-12 col-sm-12 col-md-8 col-lg-9 col-xl-9 cont-productos ">
        <div class="row cont">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam facilis sed dolorem sint similique expedita distinctio et illum, magni maiores, non dolorum, debitis doloribus. Repudiandae vitae quaerat reiciendis consequuntur, nobis!</p>
        </div>
    </div>
    <div class="order-sm-1 col-xs-12 col-sm-12 col-md-4 col-lg-3 col-xl-3">
        <div class="menu">
            <p class="titulo-cat">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae amet a beatae quod atque quia quaerat numquam ea pariatur architecto, fugiat repudiandae, nesciunt adipisci saepe maiores sequi, aut est cupiditate.</p>
            </ul>
        </div>
        <div class="menu menu-2">
            <p class="titulo-cat">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur cupiditate, aliquam. Laboriosam eius a vero cum dolores optio inventore cupiditate possimus porro sunt. Ad ducimus sint minus accusantium sunt, fuga.</p>
        </div>
    </div>
</div>
2
  • Si uso order-* solo me cambia el orden en todas las vistas, y solo quiero que la cambie en XS, he probado con order-sm-* según la documentación pero no cabia nada
    – David
    Commented el 23 nov. 2019 a las 13:24
  • Fijate que lo que hice fue invertir el HTML para que por defecto lo veas como querés en XS y después use la clase order-sm-* para cambiar el orden de sm en adelante.
    – azeós
    Commented el 23 nov. 2019 a las 13:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.