Cambiar el orden de las columnas

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

CSS
Cambiar el orden de las columnas

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

DESCARGAR

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.

 


¿Quieres descargar el código fuente Cambiar el orden de las columnas?
...por favor suscríbete gratuitamente para descargarlo

DESCARGAR

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

Whatsapp Messenger Facebook Twitter
ó copia el link

Visitado 794 veces | Publicado hace 9 meses

Más códigos de programación en BOOTSTRAP.

Ver scripts de BOOTSTRAP

© Todos los derechos reservados CODEA APLICACIONES | Comunidad de programación web y desarrollo de aplicaciones móviles | 2020