谢谢你的帮助，好的，实际上我快到了。我喜欢使用bootstrap网格的解决方案，我已经添加了媒体查询，但它没有显示我想要的，从992以上它应该只显示表单，而不是按钮

<div class="container">
<div class="text-center">
    <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#myForm"> Reservations
    </button>
</div>
<br>
<form class="collapse collapse-class" role="form" id="myForm">
    <div class="col-lg-2">
        <p>
            <input type="email" class="form-control">
        </p>
    </div>
    <div class="col-lg-2">
        <p>
            <input type="password" class="form-control">
        </p>
    </div>
    <div class="col-lg-2">
        <p>
            <input type="text" class="form-control">
        </p>
    </div>
    <div class="col-lg-2">
        <p>
            <input type="text" class="form-control">
        </p>
    </div>
    <div class="col-lg-2">
        <p>
            <input type="text" class="form-control">
        </p>
    </div>
    <div class="col-lg-2">
        <button type="submit" class="btn btn-default">Button</button>
    </div>
</form>
</div>

@media (max-width: 992px) {
.collapse-class {
    display: none;
}
}

你可以用一个简单的媒体查询和css类来做你的自定义折叠。简单地把CSS显示从内联块切换到块。这里，在1000 px及以下，第二个td的两个选择将垂直堆叠;在水平方向上高于1000 px。
CSS：

.collapse-it {
        display: inline-block;
    }

@media (max-width: 1000px) {
    .collapse-it {
        display:block;
    }

  .mobile-view:after {
    content:"mobile view vertical stacking";
  }
}

于飞：

<table style="border: 1px solid black;">

<tbody><tr>
  <td style="border: 1px solid black;">
    <div style="margin:5px;">credit card expiration</div>
  </td>

<td style="border: 1px solid black;">
<div style="margin:5px;">

  <div class="form-group collapse-it">
    <select>
      <option>a</option>
      <option>b</option>
      <option>c</option>
    </select>
  </div>
  <div class="form-group collapse-it">
    <select>
      <option>d</option>
      <option>e</option>
      <option>f</option>
    </select>
  </div>

</div>                                  
</td>

  <td class="mobile-view" style="border: 1px solid black;"></td>  

</tr>

</tbody></table>

View Demo on Bootply

如果你只想让它在992px时消失，但保留按钮，那么就在你想折叠的地方放一个类，并把按钮放在它外面。然后写一个媒体查询来显示：992px下没有一个像这样：

<form class="form-inline navbar-form collapse-class" name="bookerform" action="---" method="GET" target="_self">
       <div class="form-group">hidden elements</div>
       <div class="form-group">arrivo</div>
       <div class="form-group">partenza</div>
       <div class="form-group text-left"> Numero N</div>
       <div class="form-group text-left"> Numero A</div>
       <div class="form-group text-left"> Numero B</div>
       <div class="form-group"> button check</div>
  </form>

@media (max-width: 992px) {
    .collapse-class {
        display: none;
    }
}

也许有更优雅的方式来做这件事，但我很难弄清楚你到底想要什么，所以我试着概括一下。