Bootstrap 8 colums in a row on Desktop screens, but just 3 on mobile

Solution 1:

You don't have to use two rows and cols. simply try it in one row and can change xs and sm depending on your screen size.

<div class="row gy-3">
  <div class="col col-xs-4">
    1
  </div>
  <div class="col col-xs-4">
    2
  </div>
  <div class="col  col-xs-4">
    3
  </div>
  <div class="col  col-xs-4">
    4
  </div>
  <div class="col  col-xs-4">
    5
  </div>
  <div class="col  col-xs-4">
    6
  </div>
  <div class="col col-xs-4">
    7
  </div>
  <div class="col col-xs-4">
    8
  </div>
</div>