Настройка grid формы

Для бутстрапа 3 версии переменное число колонок делается так:

на мобилках будет

1
2
3
4

на планшетах

1 2
3 4

на десктопах

1 2 3 4

код:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="form-group">
            <label for="lastName">Фамилия</label>
            <input type="text" class="form-control" id="lastName" placeholder="Фамилия">
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="form-group">
            <label for="firstName">Имя</label>
            <input type="text" class="form-control" id="firstName" placeholder="Имя">
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="form-group">
            <label for="secondName">Отчество</label>
            <input type="text" class="form-control" id="secondName" placeholder="Отчество">
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="form-group">
            <label for="birthDate">Дата рождения</label>
            <input type="text" class="form-control" id="birthDate" placeholder="Дата рождения">
        </div>
    </div>
</div>

Дополнено:

если добавить ошибку валидации (любой текст) - такая же проблема будет – soledar10

Можно применить flex, чтобы увеличение высоты блока из-за текста об ошибке меняло и высоту соседа

.flex-row {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
}
.flex-row .col-flex {
    display: flex;
}
.flex-row .col-flex > div[class*='col-'] {
    margin: -.3px; /* hack adjust for wrapping */
}

<div class="row row-flex">
    <div class="col-xs-12 col-sm-6 col-md-3 col-flex">
        ...
    </div>
</div>

Пример

@media screen and (max-width: 991px) { 
  [class*=col-]:nth-of-type(2n + 3) { 
    clear: left; 
  } 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
<div class="row"> 
  <div class="col-xs-12 col-sm-6 col-md-3"> 
    <div class="form-group"> 
      <label for="lastName">Фамилия</label> 
      <input type="text" class="form-control" id="lastName" placeholder="Фамилия"> 
      <p>Error validation</p> 
    </div> 
  </div> 
  <div class="col-xs-12 col-sm-6 col-md-3"> 
    <div class="form-group"> 
      <label for="firstName">Имя</label> 
      <input type="text" class="form-control" id="firstName" placeholder="Имя"> 
    </div> 
  </div> 
  <div class="col-xs-12 col-sm-6 col-md-3"> 
    <div class="form-group"> 
      <label for="secondName">Отчество</label> 
      <input type="text" class="form-control" id="secondName" placeholder="Отчество"> 
    </div> 
  </div> 
  <div class="col-xs-12 col-sm-6 col-md-3"> 
    <div class="form-group"> 
      <label for="birthDate">Дата рождения</label> 
      <input type="text" class="form-control" id="birthDate" placeholder="Дата рождения"> 
    </div> 
  </div> 
</div>