引导表单布局（桌面与移动输入顺序）

Question

我有一个在桌面上显示为 4 列的表单。 （引导 CSS）。我无法以正确的顺序在手机上显示它。查看按 div 分组的输入的编号顺序（屏幕截图上的不同颜色）。我如何获得所附屏幕截图（移动视图）上的订单？

我的基本引导：

 <div class="col-md-3">
1
2
3
 </div>
 <div class="col-md-6">
    <div class="row">
        <div class="col-md-6">
4
5
        </div>
        <div class="col-md-6">
6
7
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
10
        </div>
        <div class="col-md-6">
11
        </div>
    </div>
</div>
<div class="col-md-3">
8
9
12
</div>

Answer 1

您所要做的就是遵循 Bootstrap 的简单网格系统，如下所示 sn-p

代码片段

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-3">
    <input name="textinput" type="text" placeholder="1" class="form-control" />
    <input name="textinput" type="text" placeholder="2" class="form-control" />
    <input name="textinput" type="text" placeholder="3" class="form-control" />
  </div>
  <div class="col-md-9">
    <div class="row">
      <div class="col-md-4">
        <input name="textinput" type="text" placeholder="4" class="form-control" />
        <input name="textinput" type="text" placeholder="5" class="form-control" />
      </div>
      <div class="col-md-4">
        <input name="textinput" type="text" placeholder="6" class="form-control" />
        <input name="textinput" type="text" placeholder="7" class="form-control" />
      </div>
      <div class="col-md-4">
        <input name="textinput" type="text" placeholder="8" class="form-control" />
        <input name="textinput" type="text" placeholder="9" class="form-control" />
      </div>
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-4">
            <input name="textinput" type="text" placeholder="10" class="form-control" />
          </div>
          <div class="col-md-4">
            <input name="textinput" type="text" placeholder="11" class="form-control" />
          </div>
          <div class="col-md-4">
            <input name="textinput" type="text" placeholder="12" class="form-control" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这里是JSFiddle