Html 制作带有标题的响应表单/更改布局

现在我有一个

表单

，有多行

输入

和一组

标签

放在顶部作为标题

代码：

<span id="labels" class="row">
  <span id="labela" class="col-sm-2 col-sm-offset-2">
    <label>Label A</label>
  </span>
  <span id="labelb" class="col-sm-2">
    <label>Label B</label>
  </span>
  <span id="labelc" class="col-sm-2">
    <label>Label C</label>
  </span>
  <span id="labeld" class="col-sm-2">
    <label>Label D</label>
  </span>
</span>

<!-- Input Row 1-->
<span class="row inputRow">
  <span class="inputA" class="col-sm-2 col-sm-offset-2">
    <input type="text">
  </span>
   <span class="inputB" class="col-sm-2">
    <input type="text">
  </span>
   <span class="inputC" class="col-sm-2">
    <input type="text">
  </span>
   <span class="inputD" class="col-sm-2">
    <input type="text">
  </span>
</span>

<!-- Input Row 2-->
<span class="row inputRow">
  <span class="inputA" class="col-sm-2 col-sm-offset-2">
    <input type="text">
  </span>
   <span class="inputB" class="col-sm-2">
    <input type="text">
  </span>
   <span class="inputC" class="col-sm-2">
    <input type="text">
  </span>
   <span class="inputD" class="col-sm-2">
    <input type="text">
  </span>
</span>

标签A
标签B
标签C
标签D

这很好，但我正在尝试使其响应速度更快，对于较小的设备，我希望格式更改为具有

标签

/

输入

内联，如下所示：

我的问题是：是否可以负责任地改变实际布局？（我所看到的只是改变样式），如果是这样，怎么做？HTML是否有

@media

等价物

---

我甚至不知道我会用什么术语来寻找更多的资源。理想情况下，我希望它不依赖于Javascript（看起来有点像黑客），除非这是通常的做法。

Parker您好

使用更少的代码，您可以这样做。 只需使用引导

hiddenxx

类

我在这里所做的就是使用第一组代码，将标签添加到第二行，并包含这些类。

这是一个正在工作的

<div class="container col-lg-12">

    <div id="labels" class="row">
        <span id="labela" class="col-sm-2 col-xs-12">
            <label>Label A</label>
            <input type="text">
        </span>
        <span id="labelb" class="col-sm-2 col-xs-12">
            <label>Label B</label>
            <input type="text">
        </span>
        <span id="labelc" class="col-sm-2 col-xs-12">
            <label>Label C</label>
            <input type="text">
        </span>
        <span id="labeld" class="col-sm-2 col-xs-12">
            <label>Label D</label>
            <input type="text">
        </span>
    </div>

    <div id="labels" class="row spacer">
        <span id="labela" class="col-sm-2 col-xs-12">
            <label class="hidden-lg hidden-md hidden-sm">Label A</label>
            <input type="text">
        </span>
        <span id="labelb" class="col-sm-2 col-xs-12">
            <label class="hidden-lg hidden-md hidden-sm">Label B</label>
            <input type="text">
        </span>
        <span id="labelc" class="col-sm-2 col-xs-12">
            <label class="hidden-lg hidden-md hidden-sm">Label C</label>
            <input type="text">
        </span>
        <span id="labeld" class="col-sm-2 col-xs-12">
            <label class="hidden-lg hidden-md hidden-sm">Label D</label>
            <input type="text">
        </span>
    </div>


</div><!-- /.container -->

标签A
标签B
标签C
标签D
标签A
标签B
标签C
标签D

---

谢谢！这正是我需要的。