'Break the cards by 2 vertical on small screens with the header above the two

I have cards that breaks incorrectly and would like on wide screens to shot the 4 then smaller bread with two columns but the correct header above them.

My jsfiddle is here:

jsfiddle.net/ad5qa/41tbgk75/

I am not sure how to break them by the columns.

<div class="container m-3">
   <div class="row row-cols-1 row-cols-sm-2 g-4  text-center">
     <div class="col mb-2">
       <div class="card h-100">
         <div class="card-text">
           <h5 class="card-title">Preparacao</h5>
         </div>
       </div>
     </div>
     <div class="col mb-2">
       <div class="card h-100">
         <div class="card-text">
           <h5 class="card-title">Pos</h5>
         </div>
       </div>
     </div>
   </div>
   <div class="row row-cols-1 row-cols-sm-4 g-4  text-center">
     <div class="col">
       <div class="card h-100">
         <i class="bi bi-wrench-adjustable card-icon"></i>
        
       </div>
     </div>
     <div class="col">
       <div class="card h-100">
         <i class="bi bi-shield-lock card-icon"></i>
       
       </div>
     </div>
     <div class="col">
       <div class="card h-100">
         <i class="bi bi-heart-pulse card-icon "></i>
      
       </div>
     </div>
     <div class="col">
       <div class="card h-100">
         <i class="bi bi-fingerprint card-icon"></i>
       
       </div>
     </div>
   </div>
</div>

image of expected endstate

Solution 1:^[1]

col is pretty vague when it comes to having a responsive Bootstrap layout. You should replace col with col-lg-3 for larger screens to keep the four in a row and then col-md-6 and col-sm-6 for medium and smaller screens to have them be rows of two as desired.

.card-icon {
  font-size: 40px;
  text-align: center;
  color: #e45e24;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>
<html>

<head>
</head>

<body>
  <div class="d-flex justify-content-center">
    <div class="container m-3">
      <div class="row row-cols-1 row-cols-sm-2 g-4  text-center">
        <div class="col mb-2">
          <div class="card h-100">
            <div class="card-text">
              <h5 class="card-title">Preparação</h5>
            </div>
          </div>
        </div>
        <div class="col mb-2">
          <div class="card h-100">
            <div class="card-text">
              <h5 class="card-title">Pós</h5>
            </div>
          </div>
        </div>
      </div>
      <div class="row row-cols-1 row-cols-sm-4 g-4 text-center">
        <div class="col-sm-6 col-lg-3 col-md-6">
          <div class="card h-100">
            <i class="bi bi-wrench-adjustable card-icon"></i>
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <div class="card-text">
                <ul class="subdescription">
                  <li>one</li>
                  <li>two</li>
                  <li>three</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3 col-md-6">
          <div class="card h-100">
            <i class="bi bi-shield-lock card-icon"></i>
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <div class="card-text">
                <ul class="subdescription">
                  <li>one</li>
                  <li>two</li>
                  <li>three</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3 col-md-6">
          <div class="card h-100">
            <i class="bi bi-heart-pulse card-icon "></i>
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <div class="card-text">
                <ul class="subdescription">
                  <li>one</li>
                  <li>two</li>
                  <li>three</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3 col-md-6">
          <div class="card h-100">
            <i class="bi bi-fingerprint  card-icon"></i>
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <div class="card-text">
                <ul class="subdescription">
                  <li>one</li>
                  <li>two</li>
                  <li>three</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Solution 2:^[2]

The layout you are trying to achieve is a parent grid with 2 columns that stack to one on small. Each of those parent columns have a nested row containing 2 columns at every size (.col-6). The parent grid row can be .row.row-cols-1.row-cols-sm-2 with 2 .col OR just a .row with 2 .col-12.col-sm-6.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container p-3">
  <div class="row row-cols-1 row-cols-sm-2 g-4  text-center">
    <div class="col">
      <div class="card mb-2">
        <div class="card-text">
          <h5 class="card-title">One</h5>
        </div>
      </div>
      <div class="row">
        <div class="col-6">
          <div class="card">
            1
          </div>
        </div>
        <div class="col-6">
          <div class="card">
            2
          </div>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card mb-2">
        <div class="card-text">
          <h5 class="card-title">Two</h5>
        </div>
      </div>
      <div class="row">
        <div class="col-6">
          <div class="card">
            3
          </div>
        </div>
        <div class="col-6">
          <div class="card">
            4
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Kameron
Solution 2	Arleigh Hix

'Break the cards by 2 vertical on small screens with the header above the two

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]