如何在bootstrap中重叠两个div？

Question

我想创建一个布局，其中元素可以在某些区域重叠。

结果应如下图所示：

这是我到目前为止的代码：

/*START BLOG*/

.post {
  background: #FFFFFF;
  padding: 40px 40px 40px 60px;
  margin-left: -100px;
  text-align: left;
  box-shadow: 2px 2px 10px #888888;
}

.post h3 {
  color: #1EBAFD;
  font-family: 'product_sansbold';
  font-size: 52px;
  line-height: 62px;
}

.post p {
  font-family: 'Source Sans Pro';
  font-size: 20px;
  color: #4C4C4C;
  line-height: 42px;
}

.post_second {
  background: #FFFFFF;
  padding: 40px 40px 40px 60px;
  margin-left: 0px;
  margin-right: -100px;
  text-align: left;
  box-shadow: 2px 2px 10px #888888;
  z-index: 9999;
}

.post_second h3 {
  color: #1EBAFD;
  font-family: 'product_sansbold';
  font-size: 52px;
  line-height: 62px;
}

.post_second p {
  font-family: 'Source Sans Pro';
  font-size: 20px;
  color: #4C4C4C;
  line-height: 42px;
}

.row_post_1 {
  margin-bottom: 30px;
}

.row_post_2 {
  margin-top: 30px;
}

.post_1 {
  margin-bottom: 30px;
}

.feature_image_1 img {
  width: 100%;
  height: 500px;
}

.feature_image_2 img {
  width: 100%;
  height: 500px;
  z-index: -999;
  position: absolute;
  margin-left: -28px;
}

.article_1 img {
  width: 240px;
  height: 200px;
  margin-left: -27px;
}

.article_2 img {
  width: 240px;
  height: 200px;
  margin-left: 48%;
}


/*END BLOG*/

<section class="blog" id="blog" style="margin-bottom: 30px;">
  <div class="container">
    <div class="row row_post_1">
      <div class="post_1">
        <div class="col-lg-7 feature_image_1">
          <img src="img/assets/feature_1.png" alt="feature-1">
        </div>

        <div class="col-lg-5 article_1">
          <img src="img/assets/blog_1_icon.png" alt="blog_1_icon.png">
          <div class="post">
            <h3>Online Courses</h3>
            <p>User centered design actionable insight <br/>convergence pitch deck iterate unicorn food-truck<br/> innovate earned media. User centered design<br/> actionable insight convergence pitch deck iterate<br/> unicorn food-truck innovate earned
              media. </p>
          </div>
        </div>
      </div>
    </div>

    <div class="row row_post_2">
      <div class="col-lg-5 article_2">
        <img src="img/assets/blog_1_icon.png" alt="blog_1_icon.png">
        <div class="post_second">
          <h3>Online Courses</h3>
          <p>User centered design actionable insight <br/>convergence pitch deck iterate unicorn food-truck<br/> innovate earned media. User centered design<br/> actionable insight convergence pitch deck iterate<br/> unicorn food-truck innovate earned media.
          </p>
        </div>
      </div>

      <div class="post_1">
        <div class="col-lg-7 feature_image_2">
          <img src="img/assets/feature_1.png" alt="feature-1">
        </div>
      </div>
    </div>
  </div>
</section>

我的问题是它没有响应。如何通过bootstrap实现我想要的目标？