<p dir="auto">All responsive classes (both by device size and print) don't like inline elements like <span> to be hidden and shown correctly without breaking it.</span></p>
<p dir="auto">Example:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;a class=&quot;btn&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-envelope&quot;&gt;&lt;/i&gt; &lt;span class=&quot;hidden-sm&quot;&gt;Email&lt;/span&gt;&lt;/a&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">class</span>="<span class="pl-s">btn</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">i</span> <span class="pl-c1">class</span>="<span class="pl-s">glyphicon glyphicon-envelope</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">i</span><span class="pl-kos">&gt;</span> <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">hidden-sm</span>"<span class="pl-kos">&gt;</span>Email<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">It does hide the span correctly when the screensize is below 768px, however when visible it's placed below the icon since it recieves a display:block.</p>
<p dir="auto">Possible solution:<br>
Add display:inline-block for elements like a, span, i, em, strong, etc when used in combination with responsive classes.</p>
<p dir="auto">related to issues <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="16856611" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/8500" data-hovercard-type="pull_request" data-hovercard-url="/twbs/bootstrap/pull/8500/hovercard" href="https://github.com/twbs/bootstrap/pull/8500">#8500</a> , <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="14075731" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/7808" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/7808/hovercard" href="https://github.com/twbs/bootstrap/issues/7808">#7808</a> , <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="6609454" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/4929" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/4929/hovercard" href="https://github.com/twbs/bootstrap/issues/4929">#4929</a> ; using <code class="notranslate">.hidden-sm</code> to hide span within <code class="notranslate">.nav &gt; li &gt; a</code> .  Because class is <code class="notranslate">display: block</code> above -sm then text wraps to new line.  Would you consider <code class="notranslate">.hidden-*</code> classes to be <code class="notranslate">display: inline-block</code> instead ?</p>
<p dir="auto">Here's a jsfiddle of the two cases - but the repercussions could be greater outside of this situation so probably needs more consideration...  <a href="http://jsfiddle.net/jholl/P86yf/" rel="nofollow">http://jsfiddle.net/jholl/P86yf/</a></p>