0

Este es mi código y quisiera saber como hacer que la imagen 2.jpg quede arriba de la imagen 1.jpg, claro cuando la pantalla se reduzca.

<div class="container-fluid">
      <div class="row">
  <img src="img/1.jpg" class="float-left col-lg-6 col-sm-12" alt="ola" width="100%" height="236" style="padding: 0;"> 
  <img src="img/2.jpg" class="float-right col-lg-6 col-sm-12" alt="hey" width="100%" height="236" style="padding: 0;"> 
</div>
</div>

1
  • Esto lo puedes lograr con los media query de css
    – Christian
    Commented el 31 mar. 2021 a las 3:04

1 respuesta 1

0

En tu hoja de estilos CSS puedes darle al div contenedor display: flex y flex-wrap: wrap-reverse para que se produzca eso.

Tú código debería verse así

.row {
      display: flex;
      flex-wrap: wrap-reverse;
}

Ten en cuenta que las imagenes van a reordenarse dependiendo de su width y margin. Cuando ya no puedan mostrarse ambas en la pantalla una al lado de la otra.

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.