How to get labels and texboxes to align correctly for different screen sizes

Question

Here is what I have so far I am trying to keep the labels aligned with textboxes and also the textboxes to be aligned with each other while also changing different screens. I can get it to align with the large screen but not when a smaller screen is used. Thank you for the help.

<span class="visible-xs">XS</span>
<span class="visible-sm">SM</span>
<span class="visible-md">MD</span>
<span class="visible-lg">LG</span>

<div class="panel panel-primary">
    <div class="panel-heading text-center">
        <h2>Review of Vital Info</h2>
    </div>
</div>

<form class="form-horizontal">
    <div class="row">
        <div class="col-md-6"> <label>Physician:</label> <input type="text" size="12" ng-model="data.physician"/></div>
        <div class="col-md-6"> <label>Patient Name:</label> 
        <input type="text" size="15" ng-model="data.m0040a"/> <input type="text" size="3" ng-model="data.m0040b"/> <input type="text" size="15" ng-model="data.m0040c"/></div>
    </div>
    <div class="row">
        <div class="col-md-6"> <label>DOB:</label> <input type="text" size="12" ng-model="data.datem0066"/></div>
        <div class="col-md-6"> <label>Episode Timing:</label> <input type="text" size="12" ng-model="data.m0110"/></div>
    </div>
    <div class="row">
        <div class="col-md-6"> <label>Sex:</label> <input type="text" size="12" ng-model="data.sex"/></div>
        <div class="col-md-6"> <label>RFA:</label> <input type="text" size="12" ng-model="data.m0100"/></div>
    </div>
    <div class="row">
        <div class="col-md-6"> <label>Race:</label> <input type="text" size="12" ng-model="data.pt_race"/></div>
        <div class="col-md-6"> <label>Discipline blah:</label> <input type="text" size="12" ng-model="data.discipline"/></div>
    </div>
    <div class="row">
        <div class="col-md-6"> <label>Payer:</label> <input type="text" size="12" ng-model="data.payer"/></div>
        <div class="col-md-6"> <label>SOC Date:</label> <input type="text" size="12" ng-model="data.datem0030"/></div>
    </div>
    <div class="row">
        <label class="col-md-6">ID Verified: <input type="checkbox" ng-model="checkboxModel.verified_id"> </label>
        <div class="col-md-6"> <label>Referral Date:</label> <input type="text" size="12" ng-model="data.datem0104"/></div>
    </div>
    <div class="row">
        <div class="col-md-6"> <label>MCD #:</label> <input type="text" size="15" ng-model="data.m0065"/></div>
        <div class="col-md-6"> <label>M0150 Payer:</label> <input type="text" size="12" ng-model="data.m0150"/></div>
    </div>
    <div class="row">
        <div class="col-md-6"> <label>MCR #:</label> <input type="text" size="15" ng-model="data.m0020"/></div>
        <div class="col-md-6"> <label>Interpreter:</label> <input type="text" size="15" ng-model="data.interpreter"/></div>
    </div>
    <div class="row">
        <div class="col-md-6"> <label>SS #:</label> <input type="text" size="15" ng-model="data.m0064"/></div>
        <div class="col-md-6"> <label>Email:</label> <input type="email" size="20" ng-model="data.email"/></div>
    </div>
    <div class="row">
        <div class="col-md-6"> <label>Type OF Residence #:</label> <input type="text" size="12" ng-model="data.residence"/></div>
        <div class="col-md-6"> <label>Phone:</label> <input type="text" size="15" ng-model="data.patientphone"/> </div>
    </div>
    <div class="row">
        <div class="col-md-6"> <label>IP foc/date/dx:</label> <input type="text" size="12" ng-model="data.ip"/></div>
        <div class="col-md-6"> <label>Address:</label> 
    <input type="text" size="30" ng-model="data.patientadd"/> <input type="text" size="5" ng-model="data.patientcity"/> <input type="text" size="10" ng-model="data.m0060"/> </div>
    </div>
    <div class="row">
        <div class="col-md-6"> <label>TX DX C14:</label> <input type="text" size="12" ng-model="data.tx"/></div>
        <div class="col-md-6"> <label>Directions:</label> <input type="text" size="12" ng-model="data.directions"/></div>
    </div>
    <div class="row">
        <div class="col-md-6"> <label>Last MD Visit:</label> <input type="text" size="12" ng-model="data.last_md"/></div>
        <div class="col-md-6"> <label>Birth WT:</label> <input type="text" size="12" ng-model="data.weight"/></div>
    </div>
    <div class="row">
        <div class="col-md-6"> <label>Pharmacy:</label> <input type="text" size="12" ng-model="data.pharmacy"/></div>
        <div class="col-md-6"> <label>Birth HT:</label> <input type="text" size="12" ng-model="data.height"/></div>
        <div class="col-md-6"> <label>Weeks Gestational:</label> <input type="text" size="12" ng-model="data.gestational"/></div>
    </div>

    <div class="modal-footer">
        <button type="button" ng-disabled="submitting" class="btn btn-primary btn-lg" ng-class="{'btn-primary':!submitting,'btn-warning':submitting}" ng-click="submit()">
            <span ng-if="!submitting">UPDATE</span>
            <span ng-if="submitting">UPDATING...</span>
        </button>
        <button type="button" ng-disabled="submitting" class="btn btn-default btn-lg" ng-click="cancel()">CANCEL</button>
    </div>

</form>

Answer 1

You don't have to use col-md-6 if you already have col-xs-6. Applied class expands to all larger screen sizes (if not overridden).