Shuffle Components in Bootstrap library

<section class="py-5">
  <div class="container">
    <div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto mb-5">
      <span class="text-muted">Lorem ipsum</span>
      <h2 class="display-5 fw-bold mt-2 mb-3">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="lead text-muted mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <ul class="nav nav-pills justify-content-center">
        <li class="nav-item"><a class="nav-link active" href="#">Monthly</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Yearly</a></li>
      </ul>
    </div>
    <div class="row align-items-center">
      <div class="col-12 col-lg-4 mb-5 mb-lg-0">
        <div class="p-3 p-md-5 bg-light rounded text-center">
          <h4 class="text-muted">Starter</h4>
          <span class="d-inline-block display-4 fw-bold mb-5">$34,99</span>
          <ul class="mb-5">
            <li class="d-flex align-items-center mb-3">
              <svg class="text-muted me-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">Complete documentation</p>
            </li>
            <li class="d-flex align-items-center mb-3">
              <svg class="text-muted me-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">Working materials in Figma</p>
            </li>
            <li class="d-flex align-items-center mb-3">
              <svg class="text-muted me-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">100GB cloud storage</p>
            </li>
            <li class="d-flex align-items-center mb-3">
              <svg class="text-muted me-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">500 team members</p>
            </li>
          </ul>
          <a class="btn btn-primary w-100" href="#">Action</a>
        </div>
      </div>
      <div class="col-12 col-lg-4 mb-5 mb-lg-0">
        <div class="p-3 p-md-5 bg-primary rounded text-center">
          <h4 class="text-white">Pro</h4>
          <span class="d-inline-block display-4 fw-bold text-white mb-5">$65,99</span>
          <ul class="mb-5">
            <li class="d-flex align-items-center mb-3">
              <svg class="text-info me-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0 text-white">Complete documentation</p>
            </li>
            <li class="d-flex align-items-center mb-3">
              <svg class="text-info me-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0 text-white">Working materials in Figma</p>
            </li>
            <li class="d-flex align-items-center mb-3">
              <svg class="text-info me-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0 text-white">100GB cloud storage</p>
            </li>
            <li class="d-flex align-items-center mb-3">
              <svg class="text-info me-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0 text-white">500 team members</p>
            </li>
            <li class="d-flex align-items-center mb-3">
              <svg class="text-info me-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0 text-white">Premium support</p>
            </li>
          </ul>
          <a class="btn btn-light w-100 text-center" href="#">Action</a>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="p-3 p-md-5 bg-light rounded text-center">
          <h4 class="text-muted">Premium</h4>
          <span class="d-inline-block display-4 fw-bold mb-5">$99,99</span>
          <ul class="mb-5">
            <li class="d-flex align-items-center mb-3">
              <svg class="text-muted me-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">Complete documentation</p>
            </li>
            <li class="d-flex align-items-center mb-3">
              <svg class="text-muted me-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">Working materials in Figma</p>
            </li>
            <li class="d-flex align-items-center mb-3">
              <svg class="text-muted me-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">100GB cloud storage</p>
            </li>
            <li class="d-flex align-items-center mb-3">
              <svg class="text-muted me-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">500 team members</p>
            </li>
          </ul>
          <a class="btn btn-primary w-100 text-center" href="#">Action</a>
        </div>
      </div>
    </div>
  </div>
</section>