Cambiar el orden de las columnas

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

VIDEO ¿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

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: 

  1. Menu principal
  2. Menu secundario
  3. Contenido
  4. 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>

 

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 3670 veces | Publicado hace 1 año

CURSO FLUTTER DESARROLLO DE UNA APP RESTAURANT CON CARRITO DE COMPRA

Mira el temario del curso en el siguiente link
App Restaurant Flutter con Carrito de Compra

Logo Codea App

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020