Have you considered enclosing the checkboxes and radios within an additional container?
<div class="row">
<div class="col-xs-12 col-sm-4">
<label class="checkbox">
<input type="checkbox" name="checkbox1" id="checkbox1" value="option1">1
</label>
</div>
<div class="col-xs-12 col-sm-4">
<label class="checkbox">
<input type="checkbox" name="checkbox2" id="checkbox2" value="option2">2
</label>
</div>
<div class="col-xs-12 col-sm-4">
<label class="checkbox">
<input type="checkbox" name="checkbox3" id="checkbox3" value="option3">3
</label>
</div>
</div>
Please be cautious with the use of col-sm-4 - it depends on the number of checkboxes/radios you need.
Revised as per the feedback provided below.
If you really want to avoid using JavaScript, you can try implementing this approach, but keep in mind that duplicating content is generally not recommended.
<div class="visible-xs">
<div class="checkbox">
<label>
<input type="checkbox" name="CheckboxXS-1" id="CheckboxXS-1" value="option1">xs-1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="CheckboxXS-2" id="CheckboxXS-2" value="option2">xs-2 very lengthy text here
</label>
</div>
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" name="CheckboxXS-3" id="CheckboxXS-3" value="option3">xs-3
</label>
</div>
</div>
<div class="hidden-xs col-md-12">
<label class="checkbox-inline">
<input type="checkbox" name="inlineCheckboxOptions" id="inlineCheckbox1" value="option1">1
</label>
<label class="checkbox-inline">
<input type="checkbox" name="inlineCheckboxOptions" id="inlineCheckbox2" value="option2">2 very lengthy text here
</label>
<label class="checkbox-inline">
<input type="checkbox" name="inlineCheckboxOptions" id="inlineCheckbox3" value="option3">3
</label>
</div>