Text overflowing from Bootstrap 4 row - html

Question

EDIT: As requested here is the jsfiddle
When the screen gets too small for the text to fit in the row, it just overlaps other rows, rather than extending the row height. Perhaps this is because I set row heights on every row as a percentage value, in order to lay out my html page with even spacing and vertical alignment. How do I correct this overlapping of text onto other rows? Should I be looking into somehow vertically aligning my rows without setting their height? Or can I keep it the way it is and add some kind of overflow property to each row to tell them to extend their height when necessary?
All relevant images and code:
screenshot of fullscreen (good - no problems yet)
screenshot of hovering over the middle row element on smaller screens (problems)
screenshot of hovering over the bottom row of smaller screens:
all my html for the page:
<div id="landing-page" class="text-uppercase">
<div class="row hidden-lg-up" style="height:20%;overflow-y:auto;">
<div class="col-xs-3 flex-xs-middle">
<img width="100" src="images/monster2.png" />
</div>
<div class="col-xs-3 offset-xs-6 flex-xs-middle">
<img class="pull-xs-right" width="100" src="images/monster4.png" />
</div>
</div>
<div class="row" style="height:95%;overflow-y:auto;">
<div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle">
<img width="80%" src="images/monster2.png" />
</div>
<div class="col-md-12 col-lg-6 flex-xs-middle ">
<div id="motto-text" style="text-align: center;">
<h5 class="text-muted display-6">the vegan repository</h5>
<h1 class="display-3">
find vegan stuff* near you.
</h1>
<a id="try-now-button" class="with-border clickable" href="#search-filter-page">
<h5 class="text-center medium-text">try now</h5>
</a>
</div>
</div>
<div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle">
<img class="pull-xs-right" width="80%" src="images/monster4.png" />
</div>
</div>
<div class="row" style="height:5%;overflow-y:auto;">
<h4 class="display-6 flex-xs-bottom">
*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!
</h4>
</div>
</div>
all my css for the page:
div#landing-page {
background-color: #696969;
height: 100%;
padding: 110px 40px 0px 40px;
overflow-y: auto;
min-height:470px;
}
EDIT: As requested here is the jsfiddle

Answer 1

Alright. Now the question is clear. The problem was easy to fix.
The problem is in the following div. You have specified it to have col-md-12 but you didn't force it when the screen is xs
<div class="col-md-12 col-lg-6 flex-xs-middle ">
<div id="motto-text" style="text-align: center;">
<h5 class="text-muted display-6">the vegan repository</h5>
<h1 class="display-3">
find vegan stuff* near you.
</h1>
<a id="try-now-button" class="with-border clickable" href="#search-filter-page">
<h5 class="text-center medium-text">try now</h5>
</a>
</div>
</div>
so the simplest thing is to add col-xs-12 class to prevent overlapping
See example