Bootstrap3 - 在小型设备上将按钮划分为 2 行

Question

如何在中型+屏幕上将一系列按钮和输入字段放在 1 行中AND在较小的设备上将这些按钮和输入字段的（子集）划分为 2 行？

所以：在更宽（中等+）屏幕上：1 行包含所有按钮和输入字段。在较小的屏幕（xs、sm）上，我想将按钮和输入字段放在 2 行中。

仅在中+屏幕上显示一些按钮的代码有效。此代码显示在 HTML Bootstrap 代码下方。

我尝试了很多替代方案，例如此代码，但仅适用于我的手机。不在 medium+ 桌面上，不在 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;
  }
}

Answer 1

这就是你要找的。

https://getbootstrap.com/docs/4.1/utilities/display/