What is the best way to adjust a group of radio buttons, initially laid out horizontally for desktop view, to align vertically for mobile view using solely CSS.
Here is an example:
<div class="row">
<div class="col-md-12">
<fieldset>
<legend>- Hello fellow developer, please select a radio button</legend><br>
<label class="radio-inline">
<input type="radio" name="optionsRadios" value="1" checked="checked">Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" value="2">Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" value="3">Option 3
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" value="4">Option 4
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" value="5">Option 5
</label>
</fieldset>
</div>
http://www.bootply.com/zPwSnZjDoQ
To achieve the desired layout using only CSS, you can try something like this:
@media (max-width: 767px) {
.radio-inline {
display: block;
margin-bottom: 10px;
}
}