I recently started using bootstrap-4 to design a single page in HTML. However, I am encountering some challenges in making it responsive for various devices like Laptop-L, Laptop-M, and iPad. Currently, the design is only working properly for Laptop-L but not for M size and iPad. Can someone review my code and provide suggestions on how to resolve this issue?
Below is the code snippet:
<div className="row">
<div className="col-md-10">
<div className="row">
<div className="col-md-4">
<div className="fontStyle">
<span className="">1</span>
<!-- <div className="displayBlk"> -->
<label type="text">Select Technology</label>
<select value="" className="selectpicker btn btn-labeled btn-start">
<option value="">None Selected</option>
<option value="">Hello </option>
<option value="">World </option>
</select>
<!-- </div> -->
</div>
</div>
<div className="col-md-4 rowOne">
<div className="fontStyle">
Select Question Type
<button type="button" class="btn btn-primary btn-sm">Code Type</button>
<button type="button" class="btn btn-default btn-sm">Non Code Type</button>
</div>
</div>
<div className="col-md-4">
<div className="fontStyle">
Number Of Questions
<select value="" onChange="" className="selectpicker btn btn-labeled btn-start">
<option value="">Select</option>
<option value="">01</option>
<option value="">02</option>
</select>
</div>
</div>
</div>
<!-- end of 10 col row -->
</div>
<div className="col-md-2">
<span className="">
<button type="button" class="btn btn-outline-primary btn-sm">Reset</button>
</span>
<span>
<button type="button" class="btn btn-primary btn-sm">+</button>
</span>
</div>
</div>
<!-- end of main row -->
Initial layout on L-Size Screen:
Responsive layout on M-size Screen:
Desired final layout:
If anyone can offer guidance on achieving the desired design, I would greatly appreciate it.
Thank you for your assistance!