Make grid responsive bootstrap - html

Question

I am using bootstrap grid to make multiple input search filters, but on mobile device it's not responsive, any help appreciated.
I wanted to show form fields two in a row on mobile phone so that user can see labels and input search data correctly.
Desktop output: (works fine)
Mobile output: (needs to make responsive)
CODE
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<section class="section">
<div class="row">
<div class="col-md-12">
<form action="" method="post">
<section class="example">
<div class="row form-group">
<div class="col-2">
<label class="control-label">Date of Surgery</label>
<input type="date" name="date_of_surgery" class="form-control boxed">
</div>
<div class="col-2">
<label class="control-label">Hospital</label>
<input type="text" name="hospital" class="form-control" placeholder="Hospital name">
</div>
<div class="col-2">
<label class="control-label">Follow Up(from)</label>
<input type="date" name="date_from" class="form-control">
</div>
<div class="col-2">
<label class="control-label">To</label>
<input type="date" name="date_to" class="form-control">
</div>
<div class="col-2">
<label class="control-label">Diagnosis</label>
<input type="text" name="diagnosis" class="form-control">
</div>
<div class="col-2">
<label class="control-label">Surgery</label>
<input type="text" name="surgery" class="form-control">
</div>
</div>
</section>
<section class="example">
<div class="row form-group">
<div class="col-2">
<label class="control-label">Surgeon</label>
<input type="text" name="surgeon" class="form-control boxed" placeholder="Surgeon's Name">
</div>
<div class="col-2">
<label class="control-label">Assistant</label>
<input type="text" name="assistant" class="form-control" placeholder="Assistant's name">
</div>
<div class="col-2">
<label class="control-label">Anaesthetist</label>
<input type="text" name="anaesthetist" class="form-control" placeholder="Anaesthetist's name">
</div>
<div class="col-2">
<label class="control-label">Age (from)</label>
<input type="number" name="age_from" class="form-control" placeholder="Age From">
</div>
<div class="col-2">
<label class="control-label">To</label>
<input type="number" name="age_to" class="form-control" placeholder="Age To">
</div>
<div class="col-2">
<label for="sex" class="control-label">Sex</label>
<select name="sex" class="form-control">
<option selected="true" disabled="disabled">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
</div><br>
<div class="col-12">
<button type="submit" value="Search" name="search" class="btn btn-primary btn-lg btn-block"><li class="fa fa-search" area-hidden="true"></li> Search </button>
</div>
</form>
</section>

Answer 1

You just need to replace your col-2 by col-4 col-md-2 or col-6 col-sm-4 col-md-2.
Because if you apply col-2 all the devices will show the same front. Please read doc
Below an example with col-4 col-md-2:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<section class="section">
<div class="row">
<div class="col-md-12">
<form action="" method="post">
<section class="example">
<div class="row form-group">
<div class="col-4 col-md-2">
<label class="control-label">Date of Surgery</label>
<input type="date" name="date_of_surgery" class="form-control boxed">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Hospital</label>
<input type="text" name="hospital" class="form-control" placeholder="Hospital name">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Follow Up(from)</label>
<input type="date" name="date_from" class="form-control">
</div>
<div class="col-4 col-md-2">
<label class="control-label">To</label>
<input type="date" name="date_to" class="form-control">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Diagnosis</label>
<input type="text" name="diagnosis" class="form-control">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Surgery</label>
<input type="text" name="surgery" class="form-control">
</div>
</div>
</section>
<section class="example">
<div class="row form-group">
<div class="col-4 col-md-2">
<label class="control-label">Surgeon</label>
<input type="text" name="surgeon" class="form-control boxed" placeholder="Surgeon's Name">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Assistant</label>
<input type="text" name="assistant" class="form-control" placeholder="Assistant's name">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Anaesthetist</label>
<input type="text" name="anaesthetist" class="form-control" placeholder="Anaesthetist's name">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Age (from)</label>
<input type="number" name="age_from" class="form-control" placeholder="Age From">
</div>
<div class="col-4 col-md-2">
<label class="control-label">To</label>
<input type="number" name="age_to" class="form-control" placeholder="Age To">
</div>
<div class="col-4 col-md-2">
<label for="sex" class="control-label">Sex</label>
<select name="sex" class="form-control">
<option selected="true" disabled="disabled">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
</div><br>
<div class="col-12">
<button type="submit" value="Search" name="search" class="btn btn-primary btn-lg btn-block"><li class="fa fa-search" area-hidden="true"></li> Search </button>
</div>
</section>
</form>
</div>
</div>
</section>