0

Tengo dos div, cada uno tiene una card de bootstrap diferente. Una debe mostrarse en dispositivos chicos y otras en grandes.

<div class="big">
</div>
<div class="small">
</div>

Quiero que el div 'big' sea mostrado en dispositivos XL, L y M y que para el resto se muestre el div 'small'.

De acuerdo con esto: link bootstrap

Para mostrar el div 'big' en los casos anteriormente mencionados seria: .d-none .d-md-block .d-lg-block .d-xl-block?

Puedo hacer esto de otra forma?

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .big {
        display: block;
    }
    .small{
        display:none;
    }
}
1
  • Hola Carlos.. Deberías editar y mostrar el código que has probado, como ejemplo de lo que estás explicando. Debes realizar un ejemplo mínimo verificable con lo necesario para poder revisarlo. Recibirás más respuestas, y de calidad, si la pregunta está correctamente redactada. Las media queries están para realizar exactamente eso que necesitas, debería funcionar. Pon un ejemplo completo y veremos que pasa.
    – Fly
    el 26 ene. 2023 a las 9:27

1 respuesta 1

0

Si ya tienes bootstrap habilitado para mostrarlo como quieres sería algo así:

<div class="big d-sm-none d-lg-block">
</div>
<div class="small d-sm-block d-lg-none">
</div>

Para la mayoría de casos, la pantalla en tamaño "normal" ya es pequeña, con esto debería de funcionarte.

Ten en cuenta que bootstrap aplica el "Menor tamaño aplicable" así que en el caso de Small por ejemplo, si quieres que haga un "display:block" en caso de tamaño de pantalla normal, solo necesitas definir el tamaño small.

Respecto a las clases "big" y "small" salvo que las uses para otra cosa, a priori es recomendable mantenerse con la nomenclatura estándar de los frameworks. para que el código sea mas fácil de mantener.

Un saludo.

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.