When a row's column units add up to more than 12, the extra columns wrap to a new line as a unit. To control wrapping deliberately, set .row-cols-N (1 to 6, or auto) on the row to fix how many columns share a line, or insert <div class="w-100"></div> to force a break (add d-none d-md-block to break only from md up). row-cols-1 row-cols-sm-2 row-cols-lg-4 lays out a card deck without a class on each card.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<style>[class^="col"] { border: 1px solid #1565c0; background: #e3f2fd; }</style>
<div class="container text-center py-2">
<div class="row mb-2"><div class="col-9">col-9</div><div class="col-4">col-4 wraps</div></div>
<div class="row row-cols-3">
<div class="col order-last">A: order-last</div><div class="col">B</div>
<div class="col order-first">C: order-first</div><div class="col">D</div>
</div>
</div>