Html Bootstrap文本框的响应性设计

我在调整网页大小时遇到了问题（应该针对手机、平板电脑等进行优化） 我决定使用Bootstrap，我的想法如下：

A） 在PC上，我想有两个专栏

 1. Label1 [TextBox1]   ______   Label2 [TextBox2]
 2. Label3 [TextBox3]   ______   Label4 [TextBox4]
 3. Label5 [TextBox5]   ______   Label6 [TextBox6]

<div class="col-md-6">Label1 [TextBox1]</div>
<div class="col-md-6">______ Label2 [TextBox2]</div>
<div class="col-md-6">Label3 [TextBox3] ______ Label4 [TextBox4]</div>
<div class="col-md-6">Label5 [TextBox5] ______ Label6 [TextBox6]</div>

B） 在手机/平板电脑上，它应该是这样的（左下方的右部分）

我尝试了很多解决方案，但都没有成功。。这两个栏目都做得比较薄，但仍然并排出现。

A）在PC上，我想要两个栏目

 1. Label1 [TextBox1]   ______   Label2 [TextBox2]
 2. Label3 [TextBox3]   ______   Label4 [TextBox4]
 3. Label5 [TextBox5]   ______   Label6 [TextBox6]

<div class="col-md-6">Label1 [TextBox1]</div>
<div class="col-md-6">______ Label2 [TextBox2]</div>
<div class="col-md-6">Label3 [TextBox3] ______ Label4 [TextBox4]</div>
<div class="col-md-6">Label5 [TextBox5] ______ Label6 [TextBox6]</div>

Label1[TextBox1]
______标签2[TextBox2]
Label3[TextBox3]_______; Label4[TextBox4]
Label5[TextBox5]_______; Label6[TextBox6]

B） 在手机/平板电脑上，它应该是这样的（左下方的右部分）

Label1[TextBox1]
标签3[TextBox3]
Label5[文本框5]

标签2[TextBox2]

---

..

引导具有根据屏幕大小进行不同布局的功能。您可以从Bootstrap中了解更多信息

可以根据所需的布局将多个类放置到元素中

<div class="col-md-6 col-sm-12">Label1 [TextBox1]</div>
<div class="col-md-6 col-sm-12">Label2 [TextBox3]</div>
<div class="col-md-6 col-sm-12">Label3 [TextBox5]</div>

Label1[TextBox1]
标签2[TextBox3]
标签3[文本框5]

所以它要做的是，在中等屏幕上

(≥992px）

它将生成两列，但屏幕较小

(≥768px）

它将只有一列