<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/9f48aec2a5c13484f059accffaacf31f4d557cc965a17c7a2820bafa18302f48/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f333831313032392f3936343639342f65613032333938612d303531612d313165332d386538332d3464616432663731343963302e706e67"><img src="https://camo.githubusercontent.com/9f48aec2a5c13484f059accffaacf31f4d557cc965a17c7a2820bafa18302f48/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f333831313032392f3936343639342f65613032333938612d303531612d313165332d386538332d3464616432663731343963302e706e67" alt="image" data-canonical-src="https://f.cloud.github.com/assets/3811029/964694/ea02398a-051a-11e3-8e83-4dad2f7149c0.png" style="max-width: 100%;"></a></p>
<p dir="auto">By doing that, I can make button labels disappear in small screen and shown correctly in big screen.</p>
<p dir="auto">Example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;button class=&quot;btn btn-primary&quot;&gt; &lt;i class=&quot;icon icon-refresh&quot;&gt;&lt;/i&gt; &lt;span class=&quot;hidden-xs&quot;&gt; Refresh &lt;/span&gt; &lt;/button&gt;"><pre class="notranslate"><code class="notranslate">&lt;button class="btn btn-primary"&gt; &lt;i class="icon icon-refresh"&gt;&lt;/i&gt; &lt;span class="hidden-xs"&gt; Refresh &lt;/span&gt; &lt;/button&gt;
</code></pre></div>
<p dir="auto">Code to modify:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=".responsive-visibility() {
  display: block !important;
  table&amp;  { display: table; }
  tr&amp;     { display: table-row !important; }
  th&amp;,
  td&amp;     { display: table-cell !important; }
  span&amp;   { display: inline !important; }
}

.responsive-invisibility() {
    &amp;,
  tr&amp;,
  th&amp;,
  td&amp;,
  span&amp; { display: none !important; }
}"><pre class="notranslate"><code class="notranslate">.responsive-visibility() {
  display: block !important;
  table&amp;  { display: table; }
  tr&amp;     { display: table-row !important; }
  th&amp;,
  td&amp;     { display: table-cell !important; }
  span&amp;   { display: inline !important; }
}

.responsive-invisibility() {
    &amp;,
  tr&amp;,
  th&amp;,
  td&amp;,
  span&amp; { display: none !important; }
}
</code></pre></div>
<p dir="auto">I've been using it for the last month - seems to work :).</p>