Cards not going into same row on mobile? - html

Question

I have a card-group with several cards like this:
<div class="card-group">
<div class="justify-content-start p-3">
<div class="card bg-light text-center p-0" style="width: 10rem;">
<div class="card-header justify-content-right align-middle">
<span class="align-middle"><h3> {{ item[1] }} </h3></span>
</div>
<div class="card-body justify-content-center">
<img class="w-50 m-2" style="image-rendering: pixelated;" src="../static/icon.png">
<div class="input-group mt-3 w-100">
<button type="button" class="btn btn-outline-primary w-75" id="toggleButton">Water</button>
<button type="button" class="btn btn-outline-primary w-25" data-bs-toggle="collapse" data-bs-target="#timeCollapse" aria-expanded="false" aria-controls="collapseButton">
<i class="bi bi-three-dots-vertical"></i>
</button>
</div>
<div class="collapse mt-2" id="timeCollapse">
<input type="text" class="form-control" aria-label="Time Input Dropdown">
</div>
</div>
</div>
</div>
</div>
When Testing on Chrome, they work perfectly, stacking into multiple rows.
However when I turn on the mobile Layouts/Narrow the Viewport, the cards start to all go into individual rows.
I have tried narrowing the cards, to make sure they are not just too wide, but nothing seems to work.
What could cause this issue? Also is there a 'smart' width feature for cards, similar to css background-repeat: round;