bootstrap3-在小型设备上将按钮划分为两行

如何在Medium+屏幕上将一系列按钮和输入字段放在一行中 和 在较小的设备上,将这些按钮和输入字段的(一个子集)除以2行?

所以:在更宽(中等)的屏幕上:1行包含所有按钮和输入字段。在较小的屏幕(xs、sm)上,我想将按钮和intput字段放在2行中。

仅在中+屏幕上显示某些按钮的代码有效。此代码显示在HTML引导代码的下面。

我尝试了很多替代方案,例如这个代码,但这只在我的手机上有效。不在中型+台式机上,不在F12移动设备上等

<div class="row">
  <div class="col-xs-12 col-sm-6">
    <button class="btn glyphicon glyphicon-fast-backward not-on-small-screens">L</button>
    <button class="btn btn-info">M</button>
    <button class="btn btn-info">1</button>
    <button class="btn btn-info">2</button>
    <button class="btn btn-info">3</button>
    <button class="btn btn-info">4</button>
    <button class="btn btn-info">5</button>
  </div>
  <form class="form-inline">
    <span class="form-group">
      <div class="col-xs-10 col-sm-4">
        <button class="btn btn-success glyphicon not-on-small-screens">N</button>
        <input type="text" id="search" maxlength="10" size="10" name="search" class="form-control input-inline" #searcher>
      </div>
      <div class="col-xs-2 col-sm-2">
        <button class="btn btn-success glyphicon glyphicon-search">O</button>
        <span class="glyphicon glyphicon-list-alt not-on-small-screens">
        </span><input type="text" id="size" maxlength="3" size="3" class="form-control input-inline not-on-small-screens" name="size">
      </div>
    </span>
  </form>
</div>

CSS类包括:

.input-inline {
  display: inline;
}
@media only screen and (max-width: 900px) {
  .not-on-small-screens {
    display: none;
  }
}