Cambiar el orden de las columnas

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

Cambiar el orden de las columnas

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

 

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

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Cambiar el orden de las columnas?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 457 veces | Publicado hace 8 meses

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

Ver scripts de BOOTSTRAP

Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis

VER EL CURSO DE ANDROID

Programación en BOOTSTRAP

Ejemplos y scripts de programación para tus proyectos

Lo último que estamos programando en el curso: Lector de Códigos QR ANDROID PHP MYSQL

Últimos detalles diseño y prueba de la app Lector Market Alis

Diseño y prueba final del Lector QR

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019