Как сохранить значения в столбце из 2 отдельных строк, смежных с помощью сетки boostrap, когда они сворачиваются?

У меня есть загрузочная сетка, которая выглядит так ( jsfiddle ):
Широкий Видовой Экран

Когда столбцы сворачиваются на маленьком видовом экране, это выглядит следующим образом:
Введите описание изображения здесь

Мой желаемый выход это:

Введите описание изображения здесь

Я не уверен, что лучший способ — сделать так, чтобы столбцы оставались вместе, так как bootstrap конденсирует их в отдельные строки

Код:

   <div class="list-group list-group-large list-group-background list-group-background-data settings">
  <div class="list-group-header">
  <div class="list-group-title">
    <h3>Set Alerts</h3>
  </div>
  </div>
  <div class="list-group list-group-large list-group-data">
            <div class="top-row row">
                <div class="col-md-3 col-sm-12"><span>Field</span></div>
                <div class="col-md-3 col-sm-12"><span>Condition</span></div>
                <div class="col-md-2 col-sm-12"><span>Value</span></div>
      <div class="col-md-2 col-sm-12"><span>Units</span></div>
                <div class="col-md-2 col-sm-12"><span>Save/Delete</span></div>
            </div>
            <div class="row" ng-repeat="alarm in alarms">
                <div class="col-md-3 col-sm-12">
                    <select class="form-control">
                        <option>Roll</option>
            <option>Pitch</option>
            <option>Yaw</option>
                    </select>
                </div>
            <div class="col-md-3">
                <select class="form-control">
                  <option>is greater than</option>
                  <option>is less than</option>
                </select>
                </div>
                <div class="col-md-2">
                    <input type="text">
                </div>
      <div class="col-md-2">
      <span>deg</span>
      </div>
                <div class="col-md-2">
                    <button type="button"class="btn btn-success-outline">
                    <i class="fa fa-check"></i> Save</button>
                </div>
      </div>
            </div>
    </div>

1 ответ