How to make one card full width in Bootstrap's grid of cards?

Question

Bootstrap

We have a structure:

<div class="row row-cols-1 row-cols-md-2">
    <div class="col">
         <div class="card"></div>
   </div>
  <div class="col">
         <div class="card"></div>
  </div>
         ......
  <div class="col">
         <div class="card"></div>
    </div>
</div>

All this is beautifully rendered in one column on small screens and two on large ones. The task after the first two cards is to make a card (divs) for the entire width of the row. Yes, you can close the current row, open a new one to full width, and then start over again. Is there an option inside the given row to make the card full width?

Answer 1

<div class="row">
    <div class="col-md-6">
         <div class="card"></div>
   </div>
   <div class="col-md-6">
         <div class="card"></div>
  </div>
  <div class="col-12">
         <div class="card"></div>
  </div>
  <div class="col-md-6">
         <div class="card"></div>
    </div>
</div>