es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo reorganizar elementos en bootstrap de una manera específica.

11 Jul, 2023 Programación

En Bootstrap 5 me gustaría lograr reordenar las columnas entre el escritorio y el móvil como en esta imagen.

Imagen

He intentado las clases “order” y una solución alternativa con “position: absolute”, pero eso no funciona como me gustaría.

También encontré a alguien intentando lograr lo mismo, pero probablemente con una versión antigua de bootstrap y sin una solución satisfactoria (me gustaría evitar “float”). Además, la parte verde más la parte roja pueden tener mayor altura que la azul.

El código simple sin reordenamiento se encuentra aquí:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<div class="row">
  <div class="col-12 col-xxl-6">
    <div style="height:20px; background-color:green;"></div>
  </div>
  <div class="col-12 col-xxl-6">
    <div style="height:60px; background-color:blue;"></div>
  </div>
  <div class="col-12 col-xxl-6">
    <div style="height:40px; background-color:red;"></div>
  </div>
</div>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr reordenar columnas entre el escritorio y dispositivos móviles en Bootstrap 5, puedes usar las clases order y order-xx.

    En primer lugar, envuelve la columna verde y roja en un <div> con la clase order-2 order-xx-1, lo cual la moverá a la segunda posición en dispositivos móviles y a la primera posición en escritorios con una anchura de pantalla de 1200px en adelante.

    Envuelve la columna azul en un <div> con la clase order-1 order-xx-2, lo cual la moverá a la primera posición en dispositivos móviles y a la segunda posición en escritorios con una anchura de pantalla de 1200px en adelante.

    Aquí está el código modificado:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row">
  <div class="col-12 col-xxl-6 order-2 order-xx-1">
    <div style="height:40px; background-color:red;"></div>
    <div style="height:20px; background-color:green;"></div>
  </div>
  <div class="col-12 col-xxl-6 order-1 order-xx-2">
    <div style="height:60px; background-color:blue;"></div>
  </div>
</div>

    Las clases order y order-xx trabajan juntas para establecer el orden de las columnas en diferentes anchuras de pantalla. La clase order establece el orden de las columnas en dispositivos móviles, mientras que la clase order-xx establece el orden en escritorios con una anchura de pantalla de 1200px en adelante.

    Al utilizar estas clases, puedes lograr el orden deseado de las columnas sin tener que recurrir a otros trucos como position: absolute o float.

Comments are closed.