Twitter bootstrap 从桌面到移动设备的字段引导重组

我的表单中有4个字段。其中3个字段（1、2和3）的宽度相同，并且都通过col-md-4类适合于一行。第四个字段（四个）应始终为col-12。我需要的是，当窗口大小为中等或更大时，它们在同一行上放置一个2和3，在下一行上放置四个，但当屏幕尺寸较小时，我希望它们按1、4、2、3的顺序从上到下排列

现在我把它们设置在不同的行上，但我认为这行不通

如有任何帮助，将不胜感激：

以下是迄今为止我所拥有的不起作用的东西：

  <div class="row">
    <!--one-->
    <div class="form-group col-md-4">
      <label for="one" class="form-control-label"><span class="required">*</span>Task Category</label>
      <select class="form-control" id="one" name='one' title="Select one" data-size="5">
      </select>
    </div>
    <!--two-->
    <div class="form-group col-md-4">
      <label for="two" class="form-control-label"><span class="required">*</span>one</label>
      <select class="form-control" id="two" name='two' title="select two" data-size="5">
      </select>
    </div>
    <!--three-->
    <div class="form-group col-md-4">
      <label for="three" class="form-control-label"><span class="required">*</span>two</label>
      <select class="form-control" id="three" name='three' title="select three" data-size="5">
      </select>
    </div>
  </div>
  <!--Row-->
  <div class="row">
    <!--four-->
    <div class="form-group col-12">
      <textarea class="form-control" id="four" rows="3"
        placeholder="Describe four"></textarea>
    </div>
  </div>

*任务类别
*一个
*两个

您可以通过使用col的响应类来实现这一点，即每个字段上的col sm col md和col lg。见下文

*任务类别
*一个
*两个

另一篇文章对此进行了回答

---

谢谢伊舍伍德

您可以使用

order

修复此问题： 通过添加

order-2

和

order-md-12

可以指定在

md

大小或更大的范围内，第四个元素粘在底部，在

sm

到

md

大小中位于第二位。您还需要向其他表单项添加

order-1

、

order-3

和

order-4

：

*任务类别
*一个
*两个

@ORunnals-好的，您问的订单位没有找到。我将更新解决方案可能重复：