Responsive utility classes may cause unexpected wrapping

Created by: 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/