Как избежать дублирования нескольких классов css

из-за bootstrap3 многие из моих html будут заканчиваться так:

<div class="form-group">
    <label class="control-label col-xs-4 col-sm-6">Name on card</label>
    <div class="col-xs-8 col-sm-6">
        <input class="form-control" type="text" placeholder="Name on Card" required />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-xs-4 col-sm-6">Card Number</label>
    <div class="col-xs-8 col-sm-6">
        <input class="form-control" type="text" placeholder="Card Number" name="EWAY_CARDNUMBER" required value="4444333322221111" />
    </div>
</div>

см. выше коде метка узел имеет несколько классов для разных экранов мультимедиа. И я хочу, чтобы они просто использовали мой собственный класс, чтобы сократить их.

Я пытаюсь меньше создавать класс, который простирается от нескольких классов, таких как

my-control-label:extend(.control-label, .col-xs-4, col-sm-6){}

но это не работает, потому что меньше использует точное совпадение для приведенного выше примера. Да я мог бы попытаться продлить "все" например:

my-control-label:extend(.control-label all, .col-xs-4 all, col-sm-6 all){}

но это раздражает, и это взорвет сгенерированный css.

Итак, есть ли простой способ, чтобы избежать такого дублирования?

спасибо, Рон!--9-->

обновление #1:

даже расширить все не работает для моего случая

HTML-код

<div id='finalise'>
  <form class='form-horizontal'>
    <div class='form-group' >
      <label class='my-label' />
      <div class='my-controls'>
        <input class="form-control" type="text" placeholder="Name on Card" required />
      </div>

      ...
    </div>
  </form>
</div>

минус:

#finalise {
    .my-label:extend(.control-label all, .col-xs-4 all, .col-sm-3 all, .col-lg-2 all){}
    .my-controls:extend(.control-label all, .col-xs-8 all, .col-sm-5 all, .col-lg-4 all){}
}

сгенерированный css:

@media (min-width: 768px) {
  .form-horizontal .control-label,
  .form-horizontal #finalise .label,
  .form-horizontal #finalise .controls {
    text-align: right;
  }
}

см. 3-ю строку не будет применять узел html, поэтому он не работает.

какие предложения?

обновление #2: Хотя это не универсальный способ объединить несколько классов в один, но он решил эту проблему. Он использует bootstrap grid mixins решил эту проблему. Спасибо NiloVelez

HTML-код

<div id='finalise'>
  <form class='form-horizontal'>
    <div class='form-group' >
      <label class='control-label' />
      <div class='controls'>
        <input class="form-control" type="text" placeholder="Name on Card" required />
      </div>

      ...
    </div>
  </form>
</div>

минус:

#finalise {
    .form-group {
    .make-row();
}
.control-label {
    .make-xs-column(4);
    .make-sm-column(5);
    .make-lg-column(6);
}
.controls {
    .make-xs-column(8);
    .make-sm-column(5);
    .make-lg-column(6);
}
}