How do I resolve Bootstrap checkbox layout issue for iPhone

I have set up a screen layout using Bootstrap, and for most form factors, everything looks great, but with smaller iPhone sizes in portrait mode, my checkbox labels are mis-aligned. I am using labels to wrap the checkboxes so that the clickable target is much larger.

The html is as follows:

 <div class="row">
        <div class="col-lg-2 col-xs-12">
            <label>Endorsements</label><label class="required" ng-hide="row.hasNoEndorsements != undefined">*</label>
        </div>
        <div class="col-lg-3 col-xs-12">
            <label class="form-control"><input type="checkbox" value='false' title="None" ng-model="row.hasNoEndorsements" ng-click="vm.endorsementClick(row, true)"> None</label>
        </div>
        <div class="col-lg-3 col-xs-12">
            <label class="form-control"><input type="checkbox" value='true' title="Tanker" ng-model="row.isTanker" ng-click="vm.endorsementClick(row, false)"> Tanker</label>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2 col-xs-12">
        </div>
        <div class="col-lg-3 col-xs-12">
            <label class="form-control"><input type="checkbox" value='true' title="Doubles/Tripples" ng-model="row.isDoubleTriple" ng-change="vm.endorsementClick(row, false)">Double/Tripple</label>
        </div>
        <div class="col-lg-3 col-xs-12">
            <label class="form-control"><input type="checkbox" value='true' title="HazMat" ng-model="row.isHazmat" ng-change="vm.endorsementClick(row, false)"> HazMat</label>
        </div>
        <div class="col-lg-3 col-xs-12">
        </div>
        <div class="col-lg-2 hidden-xs hidden-sm">
            <button value="Remove License" title="Remove License" ng-click="vm.licenseRemove(row)" class="btn btn-info">Remove License</button>
        </div>
    </div>

In all other form factors the display is as expected.