Inicio » Blog »

21 octubre, 2024

Cambiar el orden de las columnas

#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

Cambiar el orden de las columnas

Suscríbete a nuestro canal en Youtube

Suscríbirse

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.


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.

915 descargas

Para descargar el código inicia sesión o crea una cuenta

Iniciar Sesión

Compartir link del tutorial con tus amigos


Diseño Web con Bootstrap

USD 0.00

Descarga del código fuente

Diseño Web con Bootstrap

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú