title: Bootstrap Row spacing issue
body: <p>So basically I want to have 2 extra panels show up on the left and right on md and higher, but hide it when on sm and xs. The hiding works fine, but not the showing. </p>
  
  <p>They do show up on the left and right, but the problem is the spacing between the crumbs and navigation. The crumbs get pushed down as  I add content to the right panel. When I add to the left panel it gets pushed to the side..</p>
  
  <p>Nothing on the left but something on the right is the same as the first picture</p>
  
  <p>Here's what I mean:
  <a href="https://i.stack.imgur.com/C96u8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C96u8.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/B9gi2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B9gi2.png" alt="enter image description here"></a></p>
  
  <p>I need it to be on the third picture so that crumbs stay right below nav.<a href="https://i.stack.imgur.com/oUg5k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oUg5k.png" alt="enter image description here"></a></p>
  
  <p>Here's my code:</p>
  
  <pre><code>        &lt;div class="container"&gt;
          &lt;h1&gt;Bootstrap grid (Bootstrap)&lt;/h1&gt;
          &lt;div class="site-box"&gt;
              &lt;div class="container-fluid"&gt;
  
                  &lt;div class="row"&gt;
  
                      &lt;!-- HEADER --&gt;
                      &lt;!-- Logo --&gt;
                      &lt;div class="col-xs-4 col-md-3"&gt;
                          logo
                      &lt;/div&gt;
  
                      &lt;!-- Search --&gt;
                      &lt;div class="col-xs-8 col-md-6"&gt;
                          search
                      &lt;/div&gt;
  
                      &lt;!-- Control Panel --&gt;
                      &lt;div class="col-xs-12 col-md-3"&gt;
                          control panel
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="row"&gt;
  
                      &lt;div class="col-md-3 hidden-xs hidden-sm"&gt;
                          extra panel
                      &lt;/div&gt;
  
                      &lt;!-- NAVIGATION --&gt;
                      &lt;div class="col-xs-12 col-md-6"&gt;
                          nav
                      &lt;/div&gt;
  
  
                      &lt;div class="col-md-3 hidden-xs hidden-sm"&gt;
                          extra panel
  
                      &lt;/div&gt;
  
                      &lt;div class="clearfix visible-md-block"&gt;&lt;/div&gt;
  
                      &lt;!-- Crumbs --&gt;
                      &lt;div class="col-xs-12 col-md-6 col-md-offset-3"&gt;
                          crumbs
                      &lt;/div&gt;
  
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>