Complex grid with bootstrap - css

Question

I would like to make a design like this in CSS, but without the blank below blue div and with a margin between each.
I tried different things and impossible to do that, my divs always go to a new line...
Thank you very much !
Here is my code (simplified)
.row > div { border: 1px solid black;}
.A {height:420px;}
.D {height:200px;}
.E {height:200px;}
.B {height:300px;}
.C {height:300px;}
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-6 A">
<div>
A
</div>
</div>
<div class="col-md-12 col-lg-6 B">
<div>
B
</div>
</div>
<div class="col-md-12 col-lg-6 C">
<div>
C
</div>
</div>
<div class="col-md-4 col-lg-3 D">
<div>
D
</div>
</div>
<div class="col-md-4 col-lg-3 E">
<div>
E
</div>
</div>
</div>
</div>

Answer 1

With Flexbox there, no need to use bootstrap or grid!
.topmost-wrapper {
height: 100vh;
width: 65%;
margin: 0 auto;
display: flex;
flex-direction: row;
}
.sub-wrap-1 {
display: flex;
flex-direction: column;
flex: 0.5 1 0;
height: 100%;
margin-right: 0.125rem;
}
.inner-1 {
flex: 0.7 1 0;
background: lightblue;
margin-bottom: 0.0925rem;
border-radius: 0.1825rem;
}
.inner-2 {
flex: 0.3 1 0;
display: flex;
flex-direction: row;
margin-top: 0.0925rem;
}
.in-inner-1 {
flex: 0.7 1 0;
background: lightgreen;
margin-right: 0.0825rem;
border-radius: 0.1825rem;
}
.in-inner-2 {
flex: 0.3 1 0;
background: lightsalmon;
margin-left: 0.0825rem;
border-radius: 0.1825rem;
}
.sub-wrap-2 {
display: flex;
flex-direction: column;
flex: 0.5 1 0;
height: 100%;
margin-left: 0.125rem;
}
.inner-3 {
flex: 0.5 1 0;
background: grey;
margin-bottom: 0.0925rem;
border-radius: 0.25rem;
}
.inner-4 {
flex: 0.5 1 0;
background: #3e3e3e;
margin-top: 0.0925rem;
border-radius: 0.25rem;
}
<div class='topmost-wrapper'>
<div class="sub-wrap-1">
<div class="inner-1"></div>
<div class="inner-2">
<div class="in-inner-1"></div>
<div class="in-inner-2"></div>
</div>
</div>
<div class='sub-wrap-2'>
<div class="inner-3"></div>
<div class="inner-4"></div>
</div>
</div>