¿Cómo cambiar el orden de las columnas en Bootstrap?

Para cambiar las columnas agregar la clase order-* desde 1 hasta 12, podemos jugar con los distintos tamaños sm, md y lg en esta ocasión veremos un ejemplo

Suscríbete a nuestro canal en Youtube

Bootstrap ofrece una versatilidad al momento de mover columnas para mostrar diferentes posiciones.

Que según el tamaño de la pantalla y el diseño preestablecido podemos cambiar muy fácilmente.

En este caso veamos un ejemplo en el cual deseamos que la seccion aside se muestre despues de contenido 1 en una pantalla grande escritorio y en versión móvil queremos que aside se situe al inicio de la página, contenido 2 siempre se colocará al final en las dos versiones.

EL CODIGO HTML - BOOTSTRAP ES:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
	<title></title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>
<div class="container">
  <div class="row text-center">    
    <div class="col-sm-6 order-2 order-sm-1 bg-primary">
      <h1 class="p-4">CONTENIDO 1</h1>
    </div>
    <div class="col-sm-6 order-1 order-sm-2 bg-warning">
      <h1 class="p-4">ASIDE</h1>
    </div>
    <div class="col-sm-12 order-3 bg-success">
      <H1 class="p-4">CONTENIDO 2</H1>
    </div>
 </div>
</div>
</body>
</html>

Probando esta plantilla veremos el resultado en la imagen que está al inicio de este post, hasta un próximo códido.

Ahora veamos un ejemplo de reordenamiento de columnas con Bootstrap 4.5

En este caso tenemos 4 secciones:

Menu principal
Menu secundario
Contenido
Y el pie de página

La idea es que en la versión móvil se muestre el orden 1,3,2 y 4 es decir cambiar el orden de menu secundario con contenido y viceversa.

Veamos el ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>ORDENAR COLUMNAS CON BOOTSTRAP 4.5</title>
</head>
<body>
    <div class="container-fluid">
        <div class="row text-center text-white">
            <div class="col-sm-12 bg-primary order-0 order-sm-0">
                <h1 class="display-1">1</h1>
                <p>Menu principal</p>
            </div>
            <div class="col-sm-4 bg-warning order-2 order-sm-1">
                <h1 class="display-1">2</h1>
                <p>Menu Secundario</p>
                <ul>
                    <li>menu</li>
                    <li>menu</li>
                    <li>menu</li>
                    <li>menu</li>
                </ul>
            </div>
            <div class="col-sm-8 bg-success order-1 order-sm-2">
                <h1 class="display-1">3</h1>
                <p>Contenido</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa ipsam corrupti aliquam, similique ratione aperiam sequi expedita fugit laboriosam excepturi, vitae magni molestiae laborum unde veritatis illo cum ab tenetur.</p>
            </div>
            <div class="col-sm-12 bg-dark order-3">
                <h1 class="display-1">4</h1>
                <p>Pie de página</p>
            </div>
        </div>
    </div>
    
</body>
</html>

Leido 18103 veces

Compartir link del tutorial con tus amigos

Cambiar el orden de las columnas

EL CODIGO HTML - BOOTSTRAP ES:

Ahora veamos un ejemplo de reordenamiento de columnas con Bootstrap 4.5

Aprende más sobre Bootstrap

Cursos de programación