I am using fixed-bottom class in boostrap 4 to keep the footer at bottom when there is no content or if the content is less than full page. Below is the CSS from bootstrap 4 for fixed-bottom class:

```
.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

```

My footer looks like:

```
<footer class=" fixed-bottom  container">
  <div class="row">
    <div class="col-md-5">
      some content
    </div>
    <div class="col-md-7">    
      some content
    </div>
  </div>
</footer>

```

CSS for footer:

```
footer {
    margin-top: 25px;
}

```

Footer is nicely positioned at bottom but if a user clicks a link that loads content that does not fit within the empty space on page, scrollbar appears and footer remains sticky on top of content obscuring content. How can I move the footer below the content using CSS while keeping the class fixed-bottom on footer? Footer should become visible when the user scrolls to the bottom of page.

Note that footer content is wider than the page content so trying to play with z index will not work.