title: Setting one card per row Bootstrap 4
body: <p>I'm trying to get bootstrap to show 1 card per row on small screens, 2 cards per row on medium screens, and 3 cards per row on large screens.</p>
  
  <p>I'm attempting to do this using <code>&lt;div class="col-sm-12 col-md-6 col-lg-4"&gt;</code> which is working for medium and large size screens, but for small size screens, it still shows 2, instead of 1 card per row.</p>
  
  <p>I would also like to have the navbar move to the top on the smallest size screens and remain on the left side on all other sizes. I believe it is the same issue as with the cards.</p>
  
  <p>Here is a link to my code: <a href="https://codepen.io/anon/pen/ZPQWKd" rel="nofollow noreferrer">https://codepen.io/anon/pen/ZPQWKd</a></p>