Twitter bootstrap Bootstrap 3选择器，用于从md更改为sm响应

如何更改（或向类中添加什么）以下代码，以便当浏览器更改为小尺寸时，标签名称2直接位于标签名称1之下，而输入txtName2直接位于输入txtName1之下？代码如下：

<form id="form1" class="form-horizontal" runat="server">  
 <div class="form-group">
       <label for="txtName" class="col-md-2 control-label">Name 1:</label>
        <div class="col-md-4">
            <input type="text" id="txtName" name="txtName" style="width:300px" />
        </div>
       <label for="txtName2" class="col-md-2 control-label">Name 2:</label>
        <div class="col-md-4">
            <input type="text" id="txtName2" name="txtName2" style="width:300px" />
        </div>
   </div>

名称1：
名称2：

因此，我的小型设备“外观”应该是：

名称1:txtName1

---

名称2:txtName2

您可以重写任何html代码并添加特殊类

hidden-sm
hidden-md
hidden-lg

比如说

<div class="hidden-sm">this will be hidden only on sm width size, in others will be showen</div>

这将仅在sm宽度大小上隐藏，在其他情况下将显示

您可以随时添加此类。使用该类，您可以完全更改页面的布局

---

还要记住基本规则，最好在类中为每个“lg\md\sm\xs”定义所有类型，这在官方手册中有描述。

只需将

列md-*

替换为

列xs-*

。自动地，当您达到

xs

大小时，输入宽度将为

100%

，您可以通过指定

列xs-*

来防止出现这种情况。你应该删除你的内联宽度

编辑： 您有一个带有所有标签和输入的

表单组
。每个标签输入对应该有一个。您缺少
。表单控件
：

这里有一个演示：

EDIT2:
我不知道这是否是最好的方法，但您可以在第二个标签前添加一个
：

EDIT3:
第二种方法：
我不明白。我不想隐藏任何标签或输入。我想将它们重新排列为垂直堆叠，而不是水平堆叠。除非我在你的建议中遗漏了什么。谢谢，我想我明白了。建议您为每个设备（lg、md、sm）创建一组不同的标签和输入？我理解正确吗？可以使用类“hidden-*”执行第二种形式。因此，您将有两个相同的表单，但具有不同的标记\类。例如，在lg md上，您将在sm xs上看到一个标记（其他标记将被隐藏），但首先请尝试@azeós suggest。也许这将是你的快速解决方案。否则我想隐藏会帮助你。有趣的建议。我得看看这对我是否可行。你看，这个例子非常简单。实际上，这些输入是在数据库的代码中填充的。我不知道我是否可以有两个相同ID的输入，同时隐藏一个。如果我有两个不同的ID，我就有填充这两个ID的开销。谢谢你，阿泽斯。不，这不起作用。但是谢谢你的建议。Azeos，你的小提琴以我希望的方式在小设备上显示控件。但是我看不到如何改变MD设备的位置。谢谢。带clearfix的EDIT2似乎可以完成这项工作。我从来没有使用过这个，所以我必须阅读它的功能。然后再测试一次。非常感谢你。