Мне нравится новая настройка флажков и переключателей в Bootstrap 4, но я бы хотел иметь возможность переходить от "стека" к "встроенному" в зависимости от размера экрана. Они добавили разметку для очень многих вещей, но я не могу найти способ сделать это с помощью новой проверки формы и проверки формы в строке.
В идеале, я бы хотел иметь что-то вроде
<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>
но там, где я мог бы изменить «form-check-inline» на «form-check-inline-md» или подобное - чтобы переключатели складывались до размера «MD», а затем они переходили в линию.
Есть ли что-то, о чем вы знаете, что это изначально происходит в Bootstrap 4, или это невозможно?
( нет, это не вопрос "дизайна" - это вопрос кода. Я хочу знать, какой код поможет мне достичь цели. )