Bootstrap 3 / CSS - 用于小屏幕的多行分割

Question

我在桌子上面有一个看起来像这样的图例（为了简单起见我不包括颜色和图标）

  

这是第二件事第二件事和第三件事

但是在XS视图中，我需要它看起来像这样：

  

这是第一件事第二件事和第三件事

我知道我可以使用网格系统来实现这一点，但在下面的示例代码中，我可以做些什么让.multi-line-on-xs显示它的孩子跨越不同的行？

<span class="multi-line-on-xs"><span>This is the first thing</span> <span>The second thing</span> <span>And a third</span></span>

Answer 1

我能想到的最好的是：

@media only screen and (max-width : 480px) {
  .multi-line-on-xs span {
    display: block;
  }
}

Answer 2

更好的解决方案，我正在使用的是：https://stackoverflow.com/a/23598071/2066625

基本上，将<br>添加到您希望换行符的位置，并在大屏幕上的display: none上显示<br>的媒体查询。