<p dir="auto">Some element set display is <code class="notranslate">inline-block</code>, when use .visible-xx or .hidden-xx it will replace to <code class="notranslate">block</code>. and i found that bootstrap add tr,td,th style for the issues. I suggest use <code class="notranslate">display:none</code> only, like this::</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" @media (max-width: 767px) {
  .visible-sm, .visible-md, .visible-lg, .hidden-xs{
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .visible-xs, .visible-md, .visible-lg, .hidden-sm{
    display: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .visible-xs, .visible-sm, .visible-lg, .hidden-md{
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .visible-xs, .visible-sm, .visible-md, .hidden-lg{
    display: none !important;
  }
}"><pre class="notranslate"> <span class="pl-k">@media</span> (<span class="pl-c1">max-width</span><span class="pl-kos">:</span> <span class="pl-c1">767<span class="pl-smi">px</span></span>) {
  .<span class="pl-c1">visible-sm</span><span class="pl-kos">,</span> .<span class="pl-c1">visible-md</span><span class="pl-kos">,</span> .<span class="pl-c1">visible-lg</span><span class="pl-kos">,</span> .<span class="pl-c1">hidden-xs</span>{
    <span class="pl-c1">display</span><span class="pl-kos">:</span> none <span class="pl-k">!important</span>;
  }
}

<span class="pl-k">@media</span> (<span class="pl-c1">min-width</span><span class="pl-kos">:</span> <span class="pl-c1">768<span class="pl-smi">px</span></span>) <span class="pl-c1">and</span> (<span class="pl-c1">max-width</span><span class="pl-kos">:</span> <span class="pl-c1">991<span class="pl-smi">px</span></span>) {
  .<span class="pl-c1">visible-xs</span><span class="pl-kos">,</span> .<span class="pl-c1">visible-md</span><span class="pl-kos">,</span> .<span class="pl-c1">visible-lg</span><span class="pl-kos">,</span> .<span class="pl-c1">hidden-sm</span>{
    <span class="pl-c1">display</span><span class="pl-kos">:</span> none <span class="pl-k">!important</span>;
  }
}

<span class="pl-k">@media</span> (<span class="pl-c1">min-width</span><span class="pl-kos">:</span> <span class="pl-c1">992<span class="pl-smi">px</span></span>) <span class="pl-c1">and</span> (<span class="pl-c1">max-width</span><span class="pl-kos">:</span> <span class="pl-c1">1199<span class="pl-smi">px</span></span>) {
  .<span class="pl-c1">visible-xs</span><span class="pl-kos">,</span> .<span class="pl-c1">visible-sm</span><span class="pl-kos">,</span> .<span class="pl-c1">visible-lg</span><span class="pl-kos">,</span> .<span class="pl-c1">hidden-md</span>{
    <span class="pl-c1">display</span><span class="pl-kos">:</span> none <span class="pl-k">!important</span>;
  }
}

<span class="pl-k">@media</span> (<span class="pl-c1">min-width</span><span class="pl-kos">:</span> <span class="pl-c1">1200<span class="pl-smi">px</span></span>) {
  .<span class="pl-c1">visible-xs</span><span class="pl-kos">,</span> .<span class="pl-c1">visible-sm</span><span class="pl-kos">,</span> .<span class="pl-c1">visible-md</span><span class="pl-kos">,</span> .<span class="pl-c1">hidden-lg</span>{
    <span class="pl-c1">display</span><span class="pl-kos">:</span> none <span class="pl-k">!important</span>;
  }
}</pre></div>
<p dir="auto">and bootstrap can remove all .visible-xx and .hidden-xx before.</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>