如何在折叠时使用boostrap网格将值保存在2个单独行的列中？

Question

我有一个看起来像这样的引导网格（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>

Answer 1

您需要添加

<label></label>

查看下面的JSFiddle

https://jsfiddle.net/sg05vdj8/1/