How to add padding to the extra small (xs) column only without affecting other sizes in bootstrap3

Question

I am using bootsrap 3 like this:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-6">
        <label class="control-label" for="destination">Destination</label>
        <input type="text" name="destination" class="form-control" id="destination">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
        <label for="anotherInput">Another Label</label>
        <input type="text" name="anotherInput" class="form-control">
    </div>
</div>

All the columns are set properly and behave properly no matter the screen size. The problem is that when screen is xs (extra small) there is no padding between Destination label and Another Label (doesnt look good). How can I add extra padding just for size xs (extra small) without affecting padding for other screen sizes?

Answer 1

You can play just with css and media queries :

Bootply : http://www.bootply.com/124772

CSS :

@media screen and (max-width: 768px){

  *[class*='col-xs']{
    background:blue;
    padding:50px;
  }

}

PS : I just set a blue background in order to check...