Responsive utility classes may cause unexpected wrapping

[Starefossen]

Adding any of the responsive utility classes may cause an element to "wrap" unexpectedly when right aligning the element using the pull-right class.

<button class="btn pull-right">Button <span class="visible-desktop">Title</span></button>

Expected behavior: If there is enough space the button should be displayed in one single line with the title Button and Title just beside each other.

Actual result: The button wraps after Button. Title is displayed on the line bellow. This is because .visible-desktop takes parent's display property which in this case is the button's inline-block.

Workaround: Wrap the responsive utility in a span in order to give it the right parent display property.
<button class="btn pull-right">Button <span><span class="visible-desktop">Title</span></span></button>

jsFiddle: http://jsfiddle.net/fqhTy/1/

[mdo]

The inherited display isn't inline-block—that wouldn't cause the wrapping like that. Instead it appears to be pulling in block from the .pull-right. There's not much we can do about this without having to solve it for all of our components and utilities, and I don't think that's something we need to solve at the framework level. For now, utilize your workaround or specifically modify the utility class to better suite your needs.