Bootstrap 列对齐问题

Question

我正在复制类似于此页面的博客模板https://www.ideo.com/blog

问题是，我无法让网格按我需要的方式对齐。我已经在此处 fiddle 此处 https://jsfiddle.net/f74d0ngr/9/ 上传了我的版本（确保将输出 window 调整为更大的尺寸以了解问题。）

我需要 latest - 2 和 latest - 3 帖子直接对齐在 latest - 1 下。

这是我的代码

<div id="Blog-body">
      <div class="container">
        <div class="row">
          <div class="col-lg-8">
              <p class="text-center section-head" id="The-Latest">The Latest</p>
              <img src="img/Blog1.png" alt="" class="blog-img">
              <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="title">Inviting Algorithms to the Design Team</h3>
          </div>

          <div class="col-lg-4">
              <p class="text-center section-head" id="The-Latest">Most Read</p>
              <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>

              <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>
              <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>
                   <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>

          </div>
        </div>
        <div class="row">

            <div class="col-lg-4">
                <p class="text-center section-head" id="The-Latest">The Latest</p>
                <img src="img/Blog1.png" alt="" class="blog-img">
                <p class="lead less-spacing">Blog | Lorem Ipsum</p>
                <h3 class="title">Inviting Algorithms to the Design Team</h3>

            </div>
            <div class="col-lg-4">
                <p class="text-center section-head" id="The-Latest">The Latest</p>
                <img src="img/Blog1.png" alt="" class="blog-img">
                <p class="lead less-spacing">Blog | Lorem Ipsum</p>
                <h3 class="title">Inviting Algorithms to the Design Team</h3>

            </div>


        </div>   
      </div>
    </div>

CSS

.section-head{

  background-color: #fbef39;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  line-height: 50px; 
}

我试过将所有部分放在不同的行中，但无法获得我需要的对齐方式。有什么解决这个问题的建议吗？

Answer 1

代码中的 Latest 2 和 Latest 3 部分应该在 <div class="col-lg-8"> 以及 Latest1 中，但在不同的行中。我在这里更新了代码：https://jsfiddle.net/zedqugms/

Bootstrap 列对齐问题

Bootstrap Column Alignment Issue

html

css

web-frontend

responsive-design

bootstrap-4