Bootstrap 2 images on top and 1 beside matching height? - html

Question

I have an image I am trying to replicate as seen in the image. I am trying to use bootstrap to limit the CSS.
The image I am copying is this
I have being trying to wrap my head around it but can't seem to figure it out. Below is an example of the code I have so far
<div class = "container col-md-offset-2">
<div class="row">
<div class="col-md-8 ">
<div class="row">
<div class="col-md-12 well"><img class = "img-responsive" src=""></div>
</div>
<div class="row">
<div class="col-md-12 well"><img class = "img-responsive" src=""></div>
</div>
</div>
<div class="col-md-4 well"><img class = "img-responsive" src=""></div>
</div>
</div>

Answer 1

.banner_text {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #fff;
font-size: 36px;
}
.banner_wrapper {
background: lightgreen;
height: 250px;
}
.left_wrapper_block {
height: 150px;
padding: 30px;
margin: 10px 0;
background: lightblue;
}
.right_wrapper_block {
padding: 30px;
margin: 10px 0;
background: lightyellow;
height: 310px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12 banner_wrapper">
<p class="banner_text">Latest News</p>
</div>
</div>
<div class="row">
<div class="col-md-6 left_wrapper">
<div class="left_wrapper_block">
<p>Resources</p>
</div>
<div class="left_wrapper_block">
<p>Lorem Serum</p>
</div>
</div>
<div class="col-md-6 right_wrapper">
<div class="right_wrapper_block">
<p>Lorem Serum</p>
</div>
</div>
</div>
</div>