<p dir="auto">The issue is that putting <code class="notranslate">class="visible-md visible-lg"</code> on an element will only make the element visible in the largest of the specified views (in this case <code class="notranslate">visible-lg</code>).</p>
<p dir="auto">The reason is that the CSS specificity that made this work in v3.0.3 was removed in v3.1.0 without correcting the order of CSS to make up for the decrease in specificity. Now the <code class="notranslate">display: none !important</code> of <code class="notranslate">visible-lg</code> overrides the <code class="notranslate">display: block !important</code> of <code class="notranslate">visible-md</code> because it is later in the CSS file (since the media query doesn't give any greater specificity). This most likely can be corrected by putting all the <code class="notranslate">display: block !important</code> wrapped in media queries after the <code class="notranslate">display: none !important</code>.</p>
<p dir="auto">So change:</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".visible-md,
tr.visible-md,
th.visible-md,
td.visible-md {
  display: none !important;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
  table.visible-md {
    display: table;
  }
  tr.visible-md {
    display: table-row !important;
  }
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}
.visible-lg,
tr.visible-lg,
th.visible-lg,
td.visible-lg {
  display: none !important;
}"><pre class="notranslate">.<span class="pl-c1">visible-md</span><span class="pl-kos">,</span>
<span class="pl-ent">tr</span>.<span class="pl-c1">visible-md</span><span class="pl-kos">,</span>
<span class="pl-ent">th</span>.<span class="pl-c1">visible-md</span><span class="pl-kos">,</span>
<span class="pl-ent">td</span>.<span class="pl-c1">visible-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">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-md</span> {
    <span class="pl-c1">display</span><span class="pl-kos">:</span> block <span class="pl-k">!important</span>;
  }
  <span class="pl-ent">table</span>.<span class="pl-c1">visible-md</span> {
    <span class="pl-c1">display</span><span class="pl-kos">:</span> table;
  }
  <span class="pl-ent">tr</span>.<span class="pl-c1">visible-md</span> {
    <span class="pl-c1">display</span><span class="pl-kos">:</span> table-row <span class="pl-k">!important</span>;
  }
  <span class="pl-ent">th</span>.<span class="pl-c1">visible-md</span><span class="pl-kos">,</span>
  <span class="pl-ent">td</span>.<span class="pl-c1">visible-md</span> {
    <span class="pl-c1">display</span><span class="pl-kos">:</span> table-cell <span class="pl-k">!important</span>;
  }
}
.<span class="pl-c1">visible-lg</span><span class="pl-kos">,</span>
<span class="pl-ent">tr</span>.<span class="pl-c1">visible-lg</span><span class="pl-kos">,</span>
<span class="pl-ent">th</span>.<span class="pl-c1">visible-lg</span><span class="pl-kos">,</span>
<span class="pl-ent">td</span>.<span class="pl-c1">visible-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">to</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".visible-md,
tr.visible-md,
th.visible-md,
td.visible-md,
.visible-lg,
tr.visible-lg,
th.visible-lg,
td.visible-lg {
  display: none !important;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
  table.visible-md {
    display: table;
  }
  tr.visible-md {
    display: table-row !important;
  }
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}"><pre class="notranslate">.<span class="pl-c1">visible-md</span><span class="pl-kos">,</span>
<span class="pl-ent">tr</span>.<span class="pl-c1">visible-md</span><span class="pl-kos">,</span>
<span class="pl-ent">th</span>.<span class="pl-c1">visible-md</span><span class="pl-kos">,</span>
<span class="pl-ent">td</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-ent">tr</span>.<span class="pl-c1">visible-lg</span><span class="pl-kos">,</span>
<span class="pl-ent">th</span>.<span class="pl-c1">visible-lg</span><span class="pl-kos">,</span>
<span class="pl-ent">td</span>.<span class="pl-c1">visible-lg</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-md</span> {
    <span class="pl-c1">display</span><span class="pl-kos">:</span> block <span class="pl-k">!important</span>;
  }
  <span class="pl-ent">table</span>.<span class="pl-c1">visible-md</span> {
    <span class="pl-c1">display</span><span class="pl-kos">:</span> table;
  }
  <span class="pl-ent">tr</span>.<span class="pl-c1">visible-md</span> {
    <span class="pl-c1">display</span><span class="pl-kos">:</span> table-row <span class="pl-k">!important</span>;
  }
  <span class="pl-ent">th</span>.<span class="pl-c1">visible-md</span><span class="pl-kos">,</span>
  <span class="pl-ent">td</span>.<span class="pl-c1">visible-md</span> {
    <span class="pl-c1">display</span><span class="pl-kos">:</span> table-cell <span class="pl-k">!important</span>;
  }
}</pre></div>
<p dir="auto">See <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="26618012" data-permission-text="Title is private" data-url="https://github.com/wet-boew/wet-boew/issues/4448" data-hovercard-type="issue" data-hovercard-url="/wet-boew/wet-boew/issues/4448/hovercard?comment_id=35464859&amp;comment_type=issue_comment" href="https://github.com/wet-boew/wet-boew/issues/4448#issuecomment-35464859">wet-boew/wet-boew#4448 (comment)</a> for additional details.</p>
<p dir="auto"><a href="https://dl.dropboxusercontent.com/u/37682778/error/index.html" rel="nofollow">https://dl.dropboxusercontent.com/u/37682778/error/index.html</a></p>