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

Barra de navegación responsive con 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

VER DEMO

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>

Descarga código fuente 808

No hay descargable

Redactado por: , Leido 15000 veces

Compartir enlace del tutorial

Link Whatsapp Messenger Facebook Twitter

Cambiar el orden de las columnas

EL CODIGO HTML - BOOTSTRAP ES:

Ahora veamos un ejemplo de reordenamiento de columnas con Bootstrap 4.5

Core

Enlaces