Css 使用Bootstrap可以使响应性的两列形成

我在桌面上有这样一个两列表单

|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>

---

请帮助

使用原始代码，为每个输入设置一个类，或者为每个输入设置一个div

 <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>

A. B C D E F

---

使用原始代码，为每个输入放置一个类，或者为每个输入放置一个div

A. B C D E F

---

我使用col-sm-12和col-md-6i使用col-sm-12和col-md-6这两种方法都有效，但嵌套的col应该位于另一行中。行此方法有效，但嵌套的col应该位于另一行中。行