Las clases de ordenación de columnas en Bootstrap ayudan a cambiar el orden de nuestro sistema de cuadrícula en función de diferentes tamaños de pantalla, por ejemplo: escritorio, móvil, tableta, relojes inteligentes. Esto hace que el sitio web responda mejor a diferentes tamaños de pantalla.
Por ejemplo, digamos que tenemos 4 columnas (V, X, Y y Z). Queremos que la apariencia sea
-
En pantallas grandes:
V X Y Z
-
En pantallas pequeñas (móvil):
Y Z V X
Podemos cambiar fácilmente el orden de las columnas de cuadrícula integradas con clases de columnas push y pull .
Las clases Push y Pull: La clase push moverá las columnas hacia la derecha mientras que la clase pull moverá las columnas hacia la izquierda.
Sintaxis:
.col-md-pull-#
o
.col-md-push-#
Nota: # es un número que va del 1 al 12 ( sistema de cuadrícula de arranque)
Reordenación de columnas: Cree su contenido móvil primero (código escrito para la pantalla del móvil) porque es más fácil empujar y extraer columnas en dispositivos más grandes. Por lo tanto, debe centrarse primero en sus pedidos móviles y luego en pantallas más grandes como tabletas o computadoras de escritorio.
Guía paso a paso para la implementación:
-
Paso 1: Incluya Bootstrap CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css”>
-
Paso 2: agregue la etiqueta <div> en el cuerpo HTML con la fila de clase.
-
Paso 3: agregue la etiqueta <div> para diferentes columnas con clases .push, .pull, etc. en la etiqueta <body> .
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css"/> </head> <body> <div class="row"> <div class="well well-lg clearfix"> <div class="col-xs-12 col-md-4 col-md-push-4"> <div class="alert alert-success">2</div> </div> <div class="col-xs-6 col-md-4 col-md-pull-4"> <div class="alert alert-info">1</div> </div> <div class="col-xs-6 col-md-4"> <div class="alert alert-warning">3</div> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css"/> </head> <body> <div class="row"> <div class="well well-lg clearfix"> <div class="col-xs-6 col-md-4"> <div class="alert alert-info">1</div> </div> <div class="col-xs-6 col-md-4 col-md-push-4"> <div class="alert alert-warning">3</div> </div> <div class="col-xs-12 col-md-4 col-md-pull-4"> <div class="alert alert-success">2</div> </div> </div> </div> </body> </html>
Producción:
Conclusión: al utilizar estos procedimientos, podemos hacer que nuestro sitio web responda a diferentes tamaños de pantalla y escribir contenido móvil.
Publicación traducida automáticamente
Artículo escrito por saksham894954 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA