I have designed a form using bootstrap 5 with 1 row containing 4 columns (1 dropdown menu and 3 buttons). While it looks fine on my desktop, the problem arises when I view the page on a mobile device. The buttons shrink and remain on the same row instead of adjusting to the new resolution. How can I restructure the form so that the buttons stack on top of each other on mobile devices instead of next to each other?
Here is a snapshot of my current code
<div class="container-fluid">
<div class="row g-3 mx-3">
<div class="col">
<select class="form-select form-control">
<option selected>Select Level</option>
<option value="1">Easy</option>
<option value="2">Medium</option>
<option value="3">Hard</option>
<option value="4">Evil</option>
</select>
</div>
<div class="col">
<button type="submit" class="form-control btn btn-primary">New Board</button>
</div>
<div class="col">
<button type="submit" class="form-control btn btn-danger">Clear Board</button>
</div>
<div class="col">
<button type="submit" class="form-control btn btn-success">Check</button>
</div>
</div>
</div>