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

Question

我在桌面上有一个表格，以4列显示。 （Bootstrap CSS）。我在使用正确的订单在移动设备上显示它时遇到问题。看看按div分组的输入的编号顺序（屏幕截图上的不同颜色）。如何在附加的屏幕截图（Moble View）中获得订单？

My Basic 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 的简单网格系统，如下面的代码段

Code Snipppet

<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