First, you are overrating the power of h-100, then you mixed h-100 with css incorrectly, basically you set on container and row height with h-100 and then in css you defined .left and .right with height of 100% so… Since your containers cannot be higher then 100% and contents (.left and .right) are 100% your “.right” is hidden out of bounds of your row because .left already took all available space…

For a starter I’ve would recommend to use weather bootstrap classes or css, it’s pretty easy to have all that without defining your own css in bootstrap…

I created a simple webpage with bootstrap that include two containers :
First container :

• A white column taking 7/12 of the first row
• A black column taking 5/12 of the second row
  Second container (under the first one)
• A grey page

The first container takes all the page and if you scroll down to the second container, it also takes all the page height

HTML :

<div class="container-fluid h-100 nopadding">
    <div class="row h-100 nopadding">
        <div class="col-md-7 left nopadding">
            left
        </div>
        <div class="col-md-5 right nopadding">
            right
        </div>
    </div>
</div>

<div class="container-fluid h-100 padding">
    <div class="row h-100">
        <div class="col details nopadding">details</div>
    </div>
</div>

CSS :

html,
body {
    height: 100%;
}

.nopadding {
    margin: 0 !important;
    padding: 0 !important;
}

.left {
    background: white;
    color: black;
    height: 100%;
}

.right {
    background: black;
    color: white;
    height: 100%;
}

.details {
    background: grey;
    color: white;
    height: 100%;
}

Here are screenshots of the page (when the page has place to display the black column, everything works. But when I resize the window, it goes under the grey container [I saw that using z-index]) :

I would like the black column to be right under the white one when I resize and the grey column to be under the black column when I resize.

Thanks!