<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Alineación y Offset en Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container">
    <!-- 1. Tarjeta centrada con offset-md-3 -->
    <div class="row mb-4">
      <div class="col-12 col-md-6 offset-md-3">
        <div class="card shadow-sm border-0 rounded-4 text-center p-4 bg-white">
          <span class="badge bg-primary-subtle text-primary fw-bold mb-2 align-self-center px-3 py-1 rounded-pill">
            col-md-6 offset-md-3
          </span>
          <h4 class="fw-bold text-dark">Panel Centrado con Offset</h4>
          <p class="text-secondary small mb-3">
            Al desplazarse 3 columnas en una fila de 12, esta caja de 6 columnas queda perfectamente equilibrada en pantallas medianas y grandes.
          </p>
          <button class="btn btn-primary px-4 rounded-pill">Entrar &raquo;</button>
        </div>
      </div>
    </div>

    <!-- 2. Reordenamiento visual con order-first / order-last -->
    <h5 class="fw-bold mb-3">Reordenamiento con order-*</h5>
    <div class="row g-2 text-center text-white">
      <div class="col-md-4 order-md-last">
        <div class="p-3 bg-danger rounded-3">
          1º en HTML &rarr; <span class="badge bg-white text-danger">order-md-last (Último visual)</span>
        </div>
      </div>
      <div class="col-md-4 order-md-2">
        <div class="p-3 bg-secondary rounded-3">
          2º en HTML &rarr; <span class="badge bg-white text-dark">order-md-2 (Centro)</span>
        </div>
      </div>
      <div class="col-md-4 order-md-first">
        <div class="p-3 bg-success rounded-3">
          3º en HTML &rarr; <span class="badge bg-white text-success">order-md-first (Primero visual)</span>
        </div>
      </div>
    </div>
  </div>

</body>
</html>