Twitter bootstrap 这是使用引导更改行中元素数量的正确方法吗

我有一个包含4个元素的表单。 在小型设备和所有大型设备上，我希望在一行中显示所有4个元素。 在一个特别小的设备上，我想把它们显示成两行，每行两个元素。 在伪代码中，我的HTML看起来像

form-group form-group-xs form-group-sm
    xs-5 sm-3 elem1
    xs-7 sm-3 elem2
    xs-5 sm-3 elem3
    xs-7 sm-3 elem4
end form-groups

这是可行的，但在我看来，这不是Bootstrap设计的工作方式。我遇到的问题是，它依赖于包装将elem3和elem4放入第2行

---

这是使用引导实现我的目标的正确方法吗？

基于12列网格系统，您希望代码如下所示：

<div class="row">
  <div class="col-xs-6 col-sm-3">element 1</div>
  <div class="col-xs-6 col-sm-3">element 2</div>
  <div class="col-xs-6 col-sm-3">element 3</div>
  <div class="col-xs-6 col-sm-3">element 4</div>
</div>

要素1
要素2
要素3
要素4

请看以下示例：