Css 当我使用少于12列时，如何避免将引导列拆分为行？

我正在尝试将一个站点名称+2个图像作为我的站点标题对齐。使用引导式网格布局，我可以在中型/大型设备中轻松实现这一点

| site-name                                                        | | image1 | | image2 |

但是，对于小尺寸设备，我的3列分成3行，布局不是我想要的：

| site-name                                                        |
| image1    |
| image2    |

由于我只使用了3个小列，我希望将它们放在同一行中，因为它们只使用了几个像素。小屏幕的结果如下：

| site-name | | image1 | | image2 |

我创造了一个新的世界。下面的代码是迄今为止我能做的最好的代码。我已经尝试过使用类似于

.pull right

的方法来避免添加空的8列，但结果是一样的

当前代码：

<div class="row">
  <div class="col-sm-2">
    <h2>text1</h2>
  </div>

  <div class="col-sm-8">
    <!-- empty -->
  </div>

  <div class="col-sm-1">
    <img src="http://placehold.it/60x60">
  </div>

  <div class="col-sm-1">
    <img src="http://placehold.it/60x60">
  </div>
</div>

文本1
 > 听起来像你所说的“小”设备是Bootstrap会考虑“额外的小”。

这将为您提供所需的效果：

<div class="row">
  <div class="col-xs-4 col-sm-2">
    <h2>text1</h2>
  </div>

  <div class="hidden-xs col-sm-8">
    <!-- empty -->
  </div>

  <div class="col-xs-4 col-sm-1">
    <img src="http://placehold.it/60x60">
  </div>

  <div class="col-xs-4 col-sm-1">
    <img src="http://placehold.it/60x60">
  </div>
</div>


文本1

您可能需要将所有类升级到下一个大小以获得所需的内容（例如“col-sm-4 col-md-1”）
这是因为您使用的是col-sm，而不是col-xs（更适用于手机等小屏幕）

试试这个：

<div class="row">
  <div class="col-xs-2">
    <h2>text1</h2>
  </div>

  <div class="col-xs-8">
    <!-- empty -->
  </div>

  <div class="col-xs-1">
    <img src="http://placehold.it/60x60">
  </div>

  <div class="col-xs-1">
    <img src="http://placehold.it/60x60">
  </div>
</div>


文本1

或者这个：

<div class="row">
  <div class="col-xs-10">
    <h2>text1</h2>
  </div>

  <div class="col-xs-1">
    <img src="http://placehold.it/60x60">
  </div>

  <div class="col-xs-1">
    <img src="http://placehold.it/60x60">
  </div>
</div>


文本1

你可以在这里读到一个很好的解释：

Ty，这是可行的，但是Brian的答案有更好的布局外观（你的建议可以合并图像）。Ty！似乎
.hidden xs
类就是解决这个问题的诀窍。