title: Bootstrap row does not fill width of screen, when hidden/displayed based on a breakpoint
body: <p>I have a bootstrap container-fluid, which contains a row. The row should display only on screens larger than 'medium'. To achieve that, I've added 'd-none d-md-block' to the row class. This works, in terms of appearing/hiding, but all of the columns in it fill the width of the screen, and are therefore stacked vertically, when they should be horizontal.
  Strangely, if I remove the d-none d-md-block classes, the columns display horizontally as expected. Code:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row d-none d-md-block"&gt;
          &lt;div class="col-auto"&gt;
              &lt;div class="menu_circle"&gt;Link 1&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-auto"&gt;
              &lt;div class="menu_circle"&gt;Link 1&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-auto"&gt;
              &lt;div class="menu_circle"&gt;Link 1&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-auto"&gt;
              &lt;div class="menu_circle"&gt;Link 1&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Fiddle:</p>
  
  <p><a href="https://jsfiddle.net/aq9Laaew/139426/" rel="nofollow noreferrer">https://jsfiddle.net/aq9Laaew/139426/</a>
  (you may have to make the output window slightly bigger to trigger the visibility).</p>