Css 如何使输入组响应（搜索和下拉）

我有以下几点，它适用于台式机。然而，我想让它具有响应性，这样在移动设备上，主类别和第二类别在搜索输入文本的下方。我该怎么做

我知道我可以使用媒体查询来做出响应，但我不知道如何在屏幕尺寸低于600px的情况下在新行上设置“输入组按钮”。最简单的方法是什么

<div class="input-group">
          <input type="text" class="form-control search-query" placeholder="Masukkan produk yang kamu cari disini">
          <div class="input-group-btn" data-toggle="tooltip" data-trigger="manual" data-placement="top" title="Pilih kategori utama pencarian">
            <button type="button" class="btn btn-default dropdown-toggle top-category-label" data-toggle="dropdown"> Main Category <span class="caret"></span></button>
            <ul class="dropdown-menu pull-right top-category">

            </ul>
          </div>
          <div class="input-group-btn" data-toggle="tooltip" data-trigger="manual" data-placement="bottom" title="Pilih kategori kedua pencarian">
            <button type="button" class="btn btn-default dropdown-toggle first-level-label" data-toggle="dropdown"> Second Category <span class="caret"></span></button>
            <ul class="dropdown-menu pull-right first-level-category">

            </ul>
          </div>
        </div>

主要类别


第二类

只需使用MediaQuery

@media (min-width: 1100px) {
  /*code for destop*/
}
@media (max-width: 1100px) {
/*code for ipad and netbooks*/
 }
@media (max-width: 480px) {
/*code for mobile here*/

}

如果您使用的是BS3

@media(max-width:767px){

}
@media(min-width:768px){

}
@media(min-width:992px){

}
@media(min-width:1200px){

}

在您的情况下，可能是这样的：

@media (max-width: 480px) {
  body {
    background: #f95e8a;
  }
.input-group-addon, .input-group-btn, .input-group .form-control {
    display: block;
    margin-bottom: 10px;
    clear: both;
    }
.input-group {
    display: block;
    }
}

---

除上述内容外，您还需要覆盖Boostrap css的这一部分：

.input-group-addon, .input-group-btn {
     width: 1%;
     white-space: nowrap;
     vertical-align: middle;
 }

将成为：

 @media (max-width: 480px) {
    .input-group-addon {
       width: 100%;
       box-sizing: content-box;
       white-space: pre-line;
   }
 }

---

您还必须将最大宽度100%和框大小：内容框添加到.input组，并添加适合您表单的任何类型的填充。

我知道如何使用媒体查询，但如何在媒体查询中的单独新行中添加它。。这是我的问题float：左边有一个最小宽度或display:block；我需要一把能和我的小提琴配合使用的小提琴。我试着使用display:block，但是没有成功。然后我检查了新的演示