Bootstrap 2图像在顶部，1在匹配高度旁边？

Question

我想要复制的图像如图所示。我试图使用bootstrap来限制CSS。

我正在复制的图像是

我一直试图绕过它，但似乎无法弄明白。下面是我到目前为止的代码示例

<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>