Trying to create a bootstrap 4 form with fields in one row for larger screens and two rows for smaller screens.
The attempt was made using the following code:
<div class="form-group row">
<label class="col-sm-2 col-form-label">File:</label>
<div class="col-sm-10 col-md-6">
<input class="form-control" type="text" />
</div>
<label class="col-sm-2 col-md-2 col-form-label">Type</label>
<div class="col-sm-4 col-md-2">
<select class="form-control"><option value=""></option></select>
</div>
</div>
For md+ screens, the fields will be in one row: 2+6+2+2
For sm screens, the first row will consist of 2+10 (let's call it A), and the next row - B - will have 2+4...
The issue arises between rows A and B where there is no margin, unlike if there were two divs with the "row" class.
Refer to this fiddle for visualization: https://jsfiddle.net/truesoft/q1djhp5b/. Row 1 demonstrates the margin between the rows, while Type label and select do not have a margin when on the next line for sm screens. Adding a margin for the submit button may cause display issues in other scenarios.
https://i.sstatic.net/uf11t.png
What would be the most effective approach to address this challenge?