Cambiar el orden de las columnas

Autor: J. Luis

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

Bootstrap 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 clases col-12 y bg-primary para ocupar todo el ancho y darle un fondo azul. La clase order-0 establece que este elemento se mostrará primero.
Contenido: Se usa <main> con col-12 col-sm-8 para que ocupe el 100% del ancho en móviles y el 66% en pantallas más grandes. La clase order-1 asegura que se muestre segundo en móviles, mientras que order-sm-2 lo posiciona como segundo en pantallas más grandes.
Menú Secundario: Se utiliza <nav> con col-12 col-sm-4 para que ocupe el 100% en móviles y el 33% en pantallas más grandes. Las clases order-2 y order-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> con col-12 y order-3 para que siempre ocupe el 100% del ancho y se muestre al final.

Vista Previa Interactiva (Demo)

Leido 20207 veces | 0 usuarios

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.