css - 使用 Bootstrap 想要做出响应式的两列表单

Question

我在桌面上有一个像这样的两列表格

|A|B|
|C|D|
|E|F|

我想在手机上

|A|
|B|
|C|
|D|
|E|
|F|

但我得到

|A|
|C|
|E|
|B|
|D|
|F|

我的代码是这样的：

<div class="row">
    <div class="col-12 col-md-6">
      <input> <!-- A -->
      <input> <!-- C -->
      <input> <!-- D -->
    </div>

    <div class="col-12 col-md-6 ">
      <input> <!-- B -->
      <input> <!-- D -->
      <input> <!-- F -->
    </div>
</div>

请你帮忙

标签： cssformsmobilebootstrap-4responsive

Answer 1

 <div class="row">
    <div class="col-md-12">
        <div class="col-md-6">
            A
        </div>
        <div class="col-md-6">
            B
        </div>
    </div>
    <div class="col-md-12">
        <div class="col-md-6">
            C
        </div>
        <div class="col-md-6">
            D
        </div>
    </div>
    <div class="col-md-12">
        <div class="col-md-6">
            E
        </div>
        <div class="col-md-6">
            F
        </div>
    </div>
</div>