title: Bootstrap 4 - Rows overlapping when reaching mobile screen size
body: <p>My current problem is that rows are overlapping each other when the screen is shrinked (responsive). I've tried adding containers without success. Also, I've noticed that rows are not "pushing" the content below them when in mobile screen sizes... What am I doing wrong here?</p>
  
  <p>Everything looks very well on desktop and tablet, but once I reach mobile screen sizes it gets hairy.</p>
  
  <p>Here's the live code: <a href="https://codepen.io/izwicky/pen/BxRgLy" rel="nofollow noreferrer">Codepen - Bootstrap rows overlapping</a></p>
  
  <p>Here's my current HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" /&gt;
  
  &lt;body&gt;
    &lt;div class="container-fluid"&gt;
      &lt;nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top"&gt;
        &lt;a class="navbar-brand text-dark" href="#"&gt;
          &lt;img src="img/logo-gp.png" height="40" width="40" alt="" /&gt;
        &lt;/a&gt;
        &lt;button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"&gt;
                              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
                          &lt;/button&gt;
        &lt;div class="collapse navbar-collapse" id="collapsibleNavbar"&gt;
          &lt;ul class="navbar-nav"&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link text-dark" href="#"&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link text-dark" href="#"&gt;Solutions&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link text-dark" href="#"&gt;Contact Us&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link text-dark" href="#"&gt;About Us&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class="row v-align position-static"&gt;
        &lt;div class="col-sm-6 col-md-8 fl-row"&gt;
          &lt;div class="f-row"&gt;
            &lt;p class="text-center txt-wrap text-light lead"&gt;A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-6 col-md-4 fl-row"&gt;
          &lt;i id="animationItem-image--bigCloud" class="animationItem material-icons"&gt;cloud&lt;/i&gt;
          &lt;i id="animationItem-image--smallCloud" class="animationItem material-icons"&gt;cloud&lt;/i&gt;
          &lt;i id="animationItem-image--smallCloud" class="animationItem material-icons smallCloud-two"&gt;cloud&lt;/i&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row  v-align"&gt;
        &lt;div class="col-md-4 s-row s-row-box"&gt;
          &lt;i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;div class="col-md-8 s-row text-center"&gt;
          &lt;h1&gt; Welcome to WEBSITE&lt;/h1&gt;
          &lt;p class="text-center txt-wrap text-light lead"&gt;ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.&lt;/p&gt;
          &lt;button type="button" class="btn btn-info"&gt;Learn About Us&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row v-align"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;h2&gt; Solutions&lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row v-align text-center"&gt;
        &lt;div class="col-md-4"&gt;
          &lt;i class="material-icons sol-icons"&gt;cloud_done&lt;/i&gt;
          &lt;div class="sol-icons-cap"&gt;
            &lt;h3&gt;Solutions&lt;/h3&gt;
            &lt;p&gt;SOLUTION DESCRIPTION GOES HERE.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
          &lt;i class="material-icons sol-icons"&gt;wifi&lt;/i&gt;
          &lt;div class="sol-icons-cap"&gt;
            &lt;h3&gt;Solutions&lt;/h3&gt;
            &lt;p&gt;SOLUTION DESCRIPTION GOES HERE.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
          &lt;i class="material-icons sol-icons"&gt;code&lt;/i&gt;
          &lt;div class="sol-icons-cap"&gt;
            &lt;h3&gt;Solutions&lt;/h3&gt;
            &lt;p&gt;SOLUTION DESCRIPTION GOES HERE.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row v-align text-center"&gt;
        &lt;div class="col-md-4"&gt;
          &lt;i class="material-icons sol-icons"&gt;touch_app&lt;/i&gt;
          &lt;div class="sol-icons-cap"&gt;
            &lt;h3&gt;Solutions&lt;/h3&gt;
            &lt;p&gt;SOLUTION DESCRIPTION GOES HERE.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
          &lt;i class="material-icons sol-icons"&gt;security&lt;/i&gt;
          &lt;div class="sol-icons-cap"&gt;
            &lt;h3&gt;Solutions&lt;/h3&gt;
            &lt;p&gt;SOLUTION DESCRIPTION GOES HERE.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
          &lt;i class="material-icons sol-icons"&gt;local_phone&lt;/i&gt;
          &lt;div class="sol-icons-cap"&gt;
            &lt;h3&gt;Solutions&lt;/h3&gt;
            &lt;p&gt;SOLUTION DESCRIPTION GOES HERE.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row v-align"&gt;
        &lt;div class="col-12"&gt;
          Animated background (xterra solution reference)
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row v-align2 text-light"&gt;
        &lt;div class="col-sm-6 t-row"&gt;
          &lt;h2&gt;| Contact Us&lt;/h2&gt;
          &lt;form&gt;
            &lt;div class="form-group"&gt;
              &lt;input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message"&gt;
            &lt;/div&gt;
            &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-6 t-row text-light"&gt;
          &lt;div class="contact-box"&gt;
            &lt;i class="material-icons"&gt;local_phone&lt;/i&gt;&lt;a href="tel:"&gt;PHONE NUMBER HERE&lt;/a&gt;&lt;br /&gt;
            &lt;i class="material-icons"&gt;email&lt;/i&gt;&lt;a href="mailto:"&gt;CONTACT EMAIL HERE&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row v-align"&gt;
        &lt;div class="col-sm-4 fl-row text-light"&gt;
          Services
        &lt;/div&gt;
        &lt;div class="col-sm-4 fl-row text-light"&gt;
          Company
        &lt;/div&gt;
        &lt;div class="col-sm-4 fl-row text-light"&gt;
          Address
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any guidence would be helpful!</p>