Bootstrap - change label position depending on screen width - html

Question

I have a bootstrap form, I would like to position labels based on the screen size.
Currently I have this code :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form name="addUser">
<div class="row">
<label class="control-label col-xs-2 col-md-2 col-lg-2">
User Name <span class="required">*</span>
</label>
<div class="col-xs-3 col-md-3 col-lg-3">
<input type="text" ng-model="user.userName" class="form-control" />
</div>
</div>
<div class="row">
<label class="control-label col-xs-2 col-md-2 col-lg-2">
Password <span class="required">*</span>
</label>
<div class="col-xs-3 col-md-3 col-lg-3">
<input type="password" ng-model="user.password" class="form-control" />
</div>
</div>
<div class="row">
<label class="control-label col-xs-2 col-md-2 col-lg-2">
Email <span class="required">*</span>
</label>
<div class="col-xs-3 col-md-3 col-lg-3">
<input type="text" ng-model="user.email" class="form-control" />
</div>
</div>
</form>
This is the output :
I am trying to auto adjust this form on small screens like this :

Answer 1

First, row need to be used with container and as commented above, you have to change the value of col-xs-. For full width you need to specify 12 on the label so it takes all the width and push the input in the next row.
And you are not obliged to make the input col-xs-12 you can use any lower value than 12 if you want them to remain small and not go full width:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form name="addUser">
<div class="container">
<div class="row">
<label class="control-label col-xs-12 col-md-2 col-lg-2">
User Name <span class="required">*</span>
</label>
<div class="col-xs-6 col-md-3 col-lg-3">
<input type="text" ng-model="user.userName" class="form-control" />
</div>
</div>
<div class="row">
<label class="control-label col-xs-12 col-md-2 col-lg-2">
Password <span class="required">*</span>
</label>
<div class="col-xs-6 col-md-3 col-lg-3">
<input type="password" ng-model="user.password" class="form-control" />
</div>
</div>
<div class="row">
<label class="control-label col-xs-12 col-md-2 col-lg-2">
Email <span class="required">*</span>
</label>
<div class="col-xs-6 col-md-3 col-lg-3">
<input type="text" ng-model="user.email" class="form-control" />
</div>
</div>
</div>
</form>