Bootstrap quesito

simoneim7

Bootstrap quesito

Ciao a tutti, volevo avere un parere da parte vostra riguardo questo problema che ho con Bootstrap, sicuramente causato da una mia scarsa conoscenza di Bootstrap.
In pratica volevo fare un contenitore con dentro 5 colonne.
1 colonna sulla sinistra lunga come il contenitore e sulla destra 4 colonne su 2 righe (1 riga: colonna 4 e colonna 8 2 riga: colonna 8 e colonna 4).
Se le metto in questo ordine si incasina tutto.
Questo è il codice che ho usato:
[HTML]
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset='utf-8' />

</head>
<body>
<header>
<section>
<div class="container mar-t-100">
<div class="row">
<div class="col-md-3 p-5 bg-cyan-lh">
<h4>LOREM IPSUM 1</h4>
<p class="text-secondary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4 bg-cyan text-white p-5 my-auto h-100">
<p>
<span class="txt-serif">LOREM IPSUM SLOGAN</span><br />
<span class="txt-oswald">SLOGAN IPSUM LOREM</span>
</p>
</div>
<div class="col-md-8 p-5 bg-cyan-lh">
<h4>LOREM IPSUM 2</h4>
<p class="text-secondary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-8">
<img class="img-fluid" src="prova.jpg" alt="Prova" />
</div>
<div class="col-md-4 bg-rosino">
<div class="mt-5 h-100">
LOREM IPSUM 3
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
[/HTML]

In pratica si vede così:
ibb.co/iaHcQp

Se le 2 righe sulla destra invece le metto della stessa lunghezza, riga 1 4+8 riga 2 4+8 invece si vede correttamente e distanziato , con le stesse proporzioni e comportamento tra le righe.

Credo potrebbe essere una cattiva gestione delle row...
Sapete darmi una mano?
Grazie ciao!

giorgiotave

Up, vediamo se qualcuno può aiutarti