21 octubre, 2024
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

Suscríbete a nuestro canal en Youtube
SuscríbirseBootstrap es un framework CSS popular que permite crear diseños responsivos de manera rápida y sencilla. En este post, exploraremos cómo organizar y reordenar columnas en una página web utilizando Bootstrap 5.3, asegurando que nuestro contenido se muestre de manera óptima en dispositivos móviles y de escritorio.
Cómo Organizar y Reordenar Columnas en Bootstrap 5.3
El objetivo es crear una estructura con cuatro secciones: Menú Principal, Contenido, Menú Secundario y Pie de Página. En dispositivos móviles, queremos que se muestren en el siguiente orden: Menú Principal, Contenido, Menú Secundario, Pie de Página. En pantallas más grandes, el orden debe ser el siguiente: Menú Principal, Menú Secundario, Contenido, Pie de Página.
Código HTML
A continuación, se presenta el código HTML completo con la estructura requerida:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhwD7p0jAl8l2+F5m1xDRmT+2aJAXZhEfd7vP7lIn3nq/CBivfYtXW7T2UYoww" crossorigin="anonymous">
<title>Ordenar Columnas con Bootstrap 5</title>
</head>
<body>
<div class="container-fluid">
<div class="row text-center text-white">
<!-- Menu Principal -->
<header class="col-12 bg-primary order-0">
<h1 class="display-1">1</h1>
<p>Menú principal</p>
</header>
<!-- Contenido (en móvil se muestra antes que el menú secundario) -->
<main class="col-12 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.</p>
</main>
<!-- Menú Secundario (en móvil se muestra después del contenido) -->
<nav class="col-12 col-sm-4 bg-warning order-2 order-sm-1">
<h1 class="display-1">2</h1>
<p>Menú Secundario</p>
<ul>
<li>menú 1</li>
<li>menú 2</li>
<li>menú 3</li>
<li>menú 4</li>
</ul>
</nav>
<!-- Pie de página -->
<footer class="col-12 bg-dark order-3">
<h1 class="display-1">4</h1>
<p>Pie de página</p>
</footer>
</div>
</div>
<!-- Bootstrap 5.3 JS (sin jQuery) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjge9c5ZMf7nK86pAtE6qlSz9ukrQtRaZH7rsm2tvk5IB3eR9yNScy" crossorigin="anonymous"></script>
</body>
</html>
Explicación del Código
1. Estructura General
<!DOCTYPE html>
: Define el documento como HTML5.<html lang="es">
: Indica que el idioma del contenido es español.<head>
: Contiene los metadatos, como la codificación de caracteres y el viewport para la responsividad. Aquí también se incluye el CSS de Bootstrap.
2. Enlaces a Bootstrap
- CSS de Bootstrap: Se incluye el enlace al archivo CSS de Bootstrap 5.3 para aplicar los estilos.
- JS de Bootstrap: Se incluye el archivo JavaScript que permite el funcionamiento de los componentes de Bootstrap, sin necesidad de jQuery.
3. Contenedor y Filas
<div class="container-fluid">
: Crea un contenedor que ocupa todo el ancho de la ventana.<div class="row text-center text-white">
: Define una fila y aplica estilos de texto centrado y color blanco.
4. Secciones de la Página
-
Menú Principal: Se utiliza
<header>
con clasescol-12
ybg-primary
para ocupar todo el ancho y darle un fondo azul. La claseorder-0
establece que este elemento se mostrará primero. -
Contenido: Se usa
<main>
concol-12 col-sm-8
para que ocupe el 100% del ancho en móviles y el 66% en pantallas más grandes. La claseorder-1
asegura que se muestre segundo en móviles, mientras queorder-sm-2
lo posiciona como segundo en pantallas más grandes. -
Menú Secundario: Se utiliza
<nav>
concol-12 col-sm-4
para que ocupe el 100% en móviles y el 33% en pantallas más grandes. Las clasesorder-2
yorder-sm-1
hacen que este elemento aparezca después del contenido en móviles, pero antes en pantallas más grandes. -
Pie de Página: Se usa
<footer>
concol-12
yorder-3
para que siempre ocupe el 100% del ancho y se muestre al final.
Leido 19526 veces | 0 usuarios
Demo
Descarga del código fuente Bootstrap de Cambiar el orden de las columnas
Accede al código fuente esencial de nuestra aplicación en formato ZIP ó TXT. Ideal para desarrolladores que desean personalizar o integrar nuestra solución.
Opciones de descarga
- Usuarios Registrados: Inicia sesión para descarga inmediata.
- Nuevos Usuarios: Regístrate y descarga.