The new layout of checkboxes and radio buttons in Bootstrap 4 really caught my attention. However, I am looking for a way to switch between "stack" and "inline" based on the screen size. Although size tagging has been added for various elements, I haven't been able to figure out how to apply it to form-check and form-check-inline.
My ideal scenario would be something like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-12">
<div class="form-group row">
<label class="col-sm-3 col-form-label text-left">Date Range:</label>
<div class="col-sm-9">
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="rdo30" ng-model="vm.dateRange" value="30" ng-selected="true" />
<label for="rdo30" class="form-check-label">Last 30 Days</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="rdo90" ng-model="vm.dateRange" value="90" />
<label for="rdo90" class="form-check-label">Last 90 Days</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="rdoYTD" ng-model="vm.dateRange" value="YTD" />
<label for="rdoYTD" class="form-check-label">YTD</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="rdoRange" ng-model="vm.dateRange" value="range" />
<label for="rdoRange" class="form-check-label">Manual Date Range</label>
</div>
</div>
</div>
</div>
</div>However, I wish to have the flexibility to change "form-check-inline" to "form-check-inline-md" or similar - allowing the radio buttons to stack until reaching the "MD" size, after which they should display inline.
Do you know if there is a built-in feature in Bootstrap 4 that allows me to achieve this, or is it not possible?
(This is not about design, but rather a code-related question. I am seeking assistance with the coding aspect of this issue.)