html - Bootstrap 表单布局(桌面与移动输入顺序)

Question

我有一个在桌面上显示为 4 列的表单。 ( Bootstrap CSS)。我在以正确的顺序在手机上显示它时遇到问题。查看按 div 分组的输入编号顺序(屏幕截图上的不同颜色)。如何获得所附屏幕截图(移动 View )中的订单？

我的基本 Bootsrap:

 <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 的简单网格系统

代码片段

<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