html flexbox 2 elements vertical and one on the left [duplicate] - html

Question

This question already has answers here:
Left column and stacked right column using flexbox CSS [duplicate]
(2 answers)
Closed 2 years ago.
I am totally lost with flexbox for css3, and I cannot seem to figure out how to get it correctly working :(.
I want a layout like:
|-----| |----|
------- |----|
|-----| |----|
(Where |----| on the left are 2 divs an on the right its one)
And on mobile I want the right div to below the other 2 divs...
And I cannot seem to figure it out.
It just will not line up correctly, or the 2 divs on the left will not be as large as the one on the right.
I am using bootstrap 4.0 for this... so maybe that is something?
The following code I am currently at:
There is a container div around it
<div id="container">
<div class="d-flex row">
<div class="flex-row flex-fill">
<div class="d-flex flex-column">
<div class="card d-flex flex-fill">
<div class="card-body">
<form>
<div class="form-group">
<label>xxx</label>
<input type="text" class="form-control date" id="birthdatepicker" data-toggle="daterangepicker" data-single-date-picker="true">
</div>
<button type="submit" class="btn btn-primary waves-effect waves-light">{{ __('Submit') }}</button>
</form>
</div>
</div>
<div class="card d-flex flex-fill mb-4 mb-md-0">
<div class="card-body">
<h4 class="card-title">{{ __('Progress') }}</h4>
<div class="progress mb-2">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-row col-12 col-md-4 col-lg-2">
<div class="d-flex flex-fill card mb-4 mb-md-0">
<div class="card-body">
<h5>xx</h5>
<p>
xx
</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

here is a simple example of what i think you wish to achive.
.flexbox{
display: flex;
flex-direction: row;
width: 400px;
height: 400px;
}
#media only screen and (max-width: 478px){
.flexbox{
flex-direction: column;
}
}
.left{
width: 50%;
height: 100%;
}
.top-left{
height: 50%;
width: 100%;
position: relative;
background: red;
}
.bottom-left{
height: 50%;
width: 100%;
position: relative;
background: green;
}
.right{
width:50%;
height:100%;
}
.center-right{
width: 100%;
height: 100%;
background: blue;
}
<div class="flexbox">
<div class="left">
<div class="top-left">
</div>
<div class="bottom-left">
</div>
</div>
<div class="right">
<div class="center-right">
</div>
</div>
</div>