Bootstrap 3 / CSS - split span over several lines for small screens

Question

I have a legend above a table that looks likes this (with colors and icons that I'm not including here for simplicity)

This is the first thing The second thing And a third

But on the XS view, I need it to look like this:

This is the first thing
The second thing
And a third

I know I could achieve this using the gird system, but in my example code below, what can I do to have .multi-line-on-xs show it's child spans on separate lines?

<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

The best I can come up with is:

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

Answer 2

A better solution, and I one I am using is here: https://stackoverflow.com/a/23598071/2066625

Basically, add <br> where you want the line breaks and have a media query that display: none on the <br> on large screens.