0

Estoy desarrollando una pagina web responsiva con bootstrap y quiero cambiar las propiedades de la clase col-md-12 segun la orientacion del dispositivo.

tengo dos div:

<div class="col-md-12 col-lg-6">
   //contenido div 1
</div>
<div class="col-md-12 col-lg-6">
   //contenido div 2
</div>

cuando el ancho es mayor a 992 los div estan en linea uno al constado del otro y cuando la resolucion es menor se pone uno debajo del otro por la clase col-md-12 de boostrap, pero quiero que solo se pongan uno debajo del otro cuando el dispositivo tenga una orientacion portrait y cuando sea landscape siga en linea uno al lado de otro.

he intentado esto pero no me funciona.

@media screen and (max-width: 992px) and (orientation: landscape) {
    /*boortrasp md*******************************/
    .col-md-12 {
       width: 50%
    }
}

1 respuesta 1

1

Revise el código css del archivo de boostrap para ver las propiedades de las clases col-md-12 y col-md-6 y encontre esto.

 .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
.col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

así que al final cambie las propiedades de la clase col-md-12 por las de col-md-6 cuando la orientación es landscape y me quedo así:

@media screen and (max-width: 992px) and (orientation: landscape) {
    /*boortrasp md*******************************/
    .col-md-12 {
        -ms-flex: 0 0 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}
1
  • Perfecto te felicito por encontrar y publicar la solución, mi única recomendación sería: por favor cuando te sea posible considera marcar la respuesta como aceptada de modo que los demás identifiquemos que esto es la solución. Saludos
    – user128299
    Commented el 27 oct. 2019 a las 3:38

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.