title: Bootstrap 3 - .visible-md has undesirable behavior after 'removing' lg breakpoint
body: <p>I am working with a website where I'm trying to "remove" the <code>lg</code> breakpoint as it is undesirable since the content is typically rather text-heavy. However, as it may make sense to use the <code>lg</code> breakpoint in the future, <strong>I would like to leave the Bootstrap source unmodified.</strong></p>
  
  <p>Here is what I have already tried:</p>
  
  <ul>
  <li><p>Modified Sass variables (in <code>_variables.scss</code>)</p>
  
  <pre><code>$screen-md-min: 970px; // MD: Tablets (portrait) + Desktop
  $screen-lg-min = $screen-md-min;
  </code></pre>
  
  <p>I got this idea from <a href="https://stackoverflow.com/a/22656490/2831961">another SO post</a>, but it hasn't worked for me completely. When I go to use <code>.visible-lg</code>, the breakpoints work as they should. When I use <code>.visible-md</code>, which in my mind should now be logically equivalent, it doesn't display for anything greater than or equal to the <code>md</code> breakpoint.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container-fluid"&gt;
    &lt;p&gt;&lt;b&gt;Resize the browser window to see the effect.&lt;/b&gt;&lt;/p&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;
        &lt;div class="visible-xs"&gt;2 column width mobile: dynamic&lt;/div&gt;
        &lt;div class="visible-sm"&gt;2 column width tablet: 93px&lt;/div&gt;
        &lt;div class="visible-lg"&gt;2 column width desktop: 148px&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-xs-2"&gt;&lt;p class="grid-txt"&gt;2&lt;/p&gt;&lt;/div&gt;
    &lt;div class="col-xs-2"&gt;&lt;p class="grid-txt"&gt;2&lt;/p&gt;&lt;/div&gt;
    &lt;div class="col-xs-2"&gt;&lt;p class="grid-txt"&gt;2&lt;/p&gt;&lt;/div&gt;
    &lt;div class="col-xs-2"&gt;&lt;p class="grid-txt"&gt;2&lt;/p&gt;&lt;/div&gt;
    &lt;div class="col-xs-2"&gt;&lt;p class="grid-txt"&gt;2&lt;/p&gt;&lt;/div&gt;
    &lt;div class="col-xs-2"&gt;&lt;p class="grid-txt"&gt;2&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col-xs-12"&gt;
        &lt;div class="visible-xs"&gt;3 column width mobile: dynamic&lt;/div&gt;
        &lt;div class="visible-sm"&gt;3 column width tablet: 146px&lt;/div&gt;
        &lt;div class="visible-md"&gt;3 column width desktop: 229px&lt;/div&gt;
        &lt;div class="visible-lg"&gt;3 column width desktop: blah&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-xs-3"&gt;&lt;p class="grid-txt"&gt;3&lt;/p&gt;&lt;/div&gt;
    &lt;div class="col-xs-3"&gt;&lt;p class="grid-txt"&gt;3&lt;/p&gt;&lt;/div&gt;
    &lt;div class="col-xs-3"&gt;&lt;p class="grid-txt"&gt;3&lt;/p&gt;&lt;/div&gt;
    &lt;div class="col-xs-3"&gt;&lt;p class="grid-txt"&gt;3&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre></li>
  </ul>
  
  <p>If this doesn't make sense, please feel free to comment asking for additional information! Thanks :)</p>