hidden-xs causes Span to become block element

[geofili]

When setting .hidden-xs on a span, the span becomes a block element when visible on media, large and xlarge displays:

Example:

<span id="title">
    Mr
</span>
<span id="first_name" class="hidden-xs">
    Fred
</span>
<span id="last_name">
   Blogs
</span>

Output on mobile:
Mr Blogs

Output on tablet and desktop:
Mr
Fred
Blogs

Notice 'first_name' span has now become block level which (cause name to be split onto multiple lines)

[geofili]

I think the BS code should be:

span.hidden-xs {
    display: inline !important;
}

because SPAN is an inline element.

[mdo]

Please search next time—this is a dupe many times over. We're considering adding inline and/or inline-block toggles.