title: Bootstrap 4 sticky-top not working properly
body: <p>I need to make the sidebar stick to the top. This works when the screen is smaller than the <code>sm</code> breakpoint, but larger than that, it doesn't stick. I thought the culprit could be the order of the class names, so I tried moving them but same results.</p>
  
  <p><code>sticky-top</code> works with <code>col-sm-*</code> but not with <code>col-*</code>. Why?</p>
  
  <p>My code is in HAML and SCSS, I hope that's okay. <a href="https://codepen.io/reiallenramos/pen/vdybKN" rel="nofollow noreferrer">Refer to this pen</a></p>
  
  <pre><code>.container
    %ul.nav
      %li.nav-item
        %a.nav-link{:href =&gt; "#"}
          Menu
      %li.nav-item
        %a.nav-link{:href =&gt; "#"}
          Active
      %li.nav-item
        %a.nav-link{:href =&gt; "#"}
          Link
    .row
      .col-sm-3.sticky-top#sidebar
        This sidebar should stick to the top, both in expanded view and stacked view.
      .col-sm-9#main
        This main will continue scrolling until the bottom while the sidebar will stick to the top.
        This main will continue scrolling until the bottom while the sidebar will stick to the top.
        This main will continue scrolling until the bottom while the sidebar will stick to the top.
        This main will continue scrolling until the bottom while the sidebar will stick to the top.
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html, body {
    margin: 0;
    height: 100%;
  }
  
  .container {
    height: 120%;
    box-shadow: 2px 2px 10px;
  
    .row {    
      &gt; #sidebar {
        background:#ccc;
      }
      &gt; #main {
        background: #eee;
      }
    }
  }
  </code></pre>