How to keep checkbox from collapsing - html

Question

I'm using bootstrap to create the following form. It works fine in a browser, but when I shrink it down, the boxes and labels stack on top of each other. Is there an easy fix for this in bootstrap so the labels and checkboxes stay in line even on mobile screens?
https://www.bootply.com/quVvJ0pLNo
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="test" class="col-sm-5 control-label">mytest</label>
<div class="col-sm-7 text-center">
<div class="row">
<div class="col-sm-1">Mon</div>
<div class="col-sm-1">Tue</div>
<div class="col-sm-1">Wed</div>
<div class="col-sm-1">Thu</div>
<div class="col-sm-1">Fri</div>
<div class="col-sm-1">Sat</div>
<div class="col-sm-1">Sun</div>
</div>
<div class="row checkbox text-center">
<div class="col-sm-1 ">
<label>
<input type="checkbox" name="test" id="test2" value="1" aria-label="1">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="2" aria-label="2">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="3" aria-label="3">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="4" aria-label="4">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="5" aria-label="5">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="6" aria-label="6">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="7" aria-label="7">
</label>
</div>
</div>
</div>
</div>

Answer 1

Try using checkbox with label text and used col-xs-1 instead of col-sm-1 for same output in mobile screen.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="test" class="col-sm-5 control-label">mytest</label>
<div class="col-sm-7 text-center">
<div class="row">
<div class="col-xs-1">
<label>
Mon<br/>
<input type="checkbox" name="test" id="test1" value="1" aria-label="1">
</label>
</div>
<div class="col-xs-1">
<label>
Tue <br/>
<input type="checkbox" name="test" id="test2" value="2" aria-label="2">
</label>
</div>
<div class="col-xs-1">
<label>
Wed <br/>
<input type="checkbox" name="test" id="test3" value="3" aria-label="3">
</label>
</div>
<div class="col-xs-1">
<label>
Thu <br/>
<input type="checkbox" name="test" id="test2" value="4" aria-label="4">
</label>
</div>
<div class="col-xs-1">
<label>
Fri <br/>
<input type="checkbox" name="test" id="test5" value="5" aria-label="5">
</label>
</div>
<div class="col-xs-1">
<label>
Sat <br/>
<input type="checkbox" name="test" id="test6" value="6" aria-label="6">
</label>
</div>
<div class="col-xs-1">
<label>
Sun <br/>
<input type="checkbox" name="test" id="test7" value="7" aria-label="7">
</label>
</div>
</div>
</div>
</div>

Answer 2

You can overwrite the default bootstrap css:
.form-group .row [class*="col-"] {
float: left;
width: 8.33333333%;
}