Inicio » Blog » Bootstrap

10 junio, 2019

Cambiar el orden de las columnas

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 video en

Suscríbete a nuestro canal en Youtube

Suscríbirse

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>

 


Leido 17493 veces

Compartir link del tutorial con tus amigos


Aprende más sobre Bootstrap

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023