Q:

Bootstrap 4 - split column into 2 rows of 50% height of parent div

Hope you're doing well! I'm having trouble achieving something with bootstrap 4. I want to make something like this image below. 
click here to see example
Which means: a row with columns, the right column splits into two rows. Those two rows (or blocks) can't go beyond the parent height (the height of the image).
The most accurate code I made so far:
 <div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-lg-6">
            <img class="img-fluid" src="img/nathan-dumlao-298337-unsplash.jpg" alt="logo-meltino">
        </div>
        <div class="col-lg-6">
            <div class="row bg-dark align-items-center justify-content-center h-50 p-5">
                <div class="col">
                    <p>Trabalhamos diariamente com café verde e torrado, o que permite explorar todas as suas potencialidades. O nosso empenho continuo no aperfeiçoamento deve-se à consciência de que o café é uma fonte inesgotável de conhecimento para todos aqueles que se envolvem com este produto. Apostamos na proximidade com todos intervinientes e processos, queremos melhorar cada dia para que a sua experiência com os nossos cafés seja única. Apostamos na proximidade com todos intervinientes e processos, queremos melhorar cada dia para que a sua experiência com os nossos cafés seja única. </p>
                </div>
            </div>
            <div class="row align-items-center justify-content-center h-50 p-5">
                <div class="col">
                    <h1>Já bebeu o seu café hoje?</h1>
                </div>
            </div>
        </div>
    </div>
</div>

I've already tried nested columns, read lots of posts and articles, tried tricks and tips from stackoverflow and css-tricks, like something called "mini-box" and "big-box". I can't actually recall all the codes I've tried as I didn't thought I would get to the point of asking around here.
I'm asking as I've tried a lot of things and didn't find a solution. I believe it has something to do about the fact I'm a newbie with bootstrap (I'm transitioning), but I enjoy learning while making!
Also, I would really appreciate an explanation, because I feel this is a misunderstanding about the way I should split the second half of the main row.
Thank you in advance! 

A:

Code below should work, but keep in mind that layout is not available on smaller screens as columns need to be stacked.

#img {
  height: 500px;
  background-color: red;
}

@media (max-width: 767px) {
  .adjust-height {
    height: auto;
  }
}

@media (min-width: 768px) {
  .adjust-height {
    height: 50%;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-12 col-md-6">
            <div id="img">
                <!-- Replaces image -->
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="row h-100">
                <div class="col-12 adjust-height bg-primary">
                    <p>Trabalhamos diariamente com café verde e torrado, o que permite explorar todas as suas potencialidades. O nosso empenho continuo no aperfeiçoamento deve-se à consciência de que o café é uma fonte inesgotável de conhecimento para todos aqueles que se envolvem com este produto. Apostamos na proximidade com todos intervinientes e processos, queremos melhorar cada dia para que a sua experiência com os nossos cafés seja única. Apostamos na proximidade com todos intervinientes e processos, queremos melhorar cada dia para que a sua experiência com os nossos cafés seja única. </p>
                </div>
                <div class="col-12 adjust-height bg-secondary">
                    <p>DIV2</p>
                </div>
            </div>
        </div>
    </div>
</div>

