Bootstrap 3 - 对齐列高

创建一个用于教育目的的网站，但我遇到了网格/列高度问题。

这是我尝试复制的网站图像：Click me https://i.stack.imgur.com/dge5f.jpg

这是我到目前为止所得到的：Click me https://i.stack.imgur.com/WYqZJ.jpg

我的问题是，在第一行上我有两列 (col-sm-6)，在第一列上我嵌套了另一行并在其中创建了 2 个附加列。然而，第二根柱子似乎比第一根柱子高。我尝试调整图像大小，但它失去了我需要的响应能力。

希望有人理解我想说的，我对网络开发真的很陌生。我希望有人能帮助我。 :(

请参阅所附图片来验证问题。谢谢。

我的代码 -

HTML:

    <!-- start portfolio-content -->
        <section class="portfolio-content">
            <div class="row" id="port-first-row">
                <div class="col-sm-6" id="port-first-col">
                    <div class="row">
                        <div class="col-12">
                            <img src="images/others/large/BridalPlannerHeader.jpg" alt="image"/>
                        </div> <!-- end col-12 -->
                        <div class="col-12">
                            <img src="images/others/large/video-home.jpg" alt="video" />
                        </div> <!-- end col-12 -->
                    </div> <!-- end row -->
                </div> <!-- end port-first-col -->

                <div class="col-sm-6" id="port-second-col">
                    <img src="images/home/medium/KC_phuket-thailand-wedding-photographer_0061.jpg" alt="image" />
                </div> <!--end port-second-col -->
            </div> <!-- end port-first-row -->

            <div class="row" id="port2-second-row">
                <div class="col-sm-6" id="port2-first-col">
                    <img src="images/others/large/Phuket_view.jpg" alt="phuket" />
                </div> <!-- end col-sm-6 -->
                <div class="col-sm-6" id="port2-second-col">
                    <img src="images/others/large/Julie+Andrew_darinimages-409.jpg" alt="julie" />
                </div> <!-- end col-sm-6 -->

            </div> <!-- end port-second-row -->
        </section> <!-- end portfolio-content -->

CSS/SASS：

 .portfolio-content {
    max-width: 100%;
  }
  img {
    width: 100%;
  }
  .col-sm-6 {
    padding: 0;
  } 
  #port-first-row {
    max-width: 100%;
    margin: 0;
  }
  #port2-second-row {
    max-width: 100%;
    margin: 0;
  }

这是一个片段，但我不明白为什么列之间的间隙如此之大。

虽然看着https://jsfiddle.net/xeen9s7y/ https://jsfiddle.net/xeen9s7y/- 效果很好。

我已经添加border: solid 1px red;到图像以获得更好的视觉控制。

img {
    width: 100%;
    height: 100%;
    border: solid 1px red;
}
.imgcont {
    height: 25vw;
    padding: 1px;
}
.imgcont2 {
    height: 50vw;
    padding: 1px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
      <section class="portfolio-content">
            <div class="row" id="port-first-row">
                <div class="col-xs-6" id="port-first-col">
                    <div class="row">
                        <div class="col-xs-12 imgcont">
                            <img src="//placehold.it/200x150/2255EE" alt="image"/>
                        </div> <!-- end col-12 -->
                        <div class="col-xs-12 imgcont">
                            <img src="//placehold.it/200x150/2255EE" alt="video" />
                        </div> <!-- end col-12 -->
                    </div> <!-- end row -->
                </div> <!-- end port-first-col -->

                <div class="col-xs-6 imgcont2" id="port-second-col">
                    <img src="//placehold.it/200x150/2255EE" alt="image" />
                </div> <!--end port-second-col -->
            </div> <!-- end port-first-row -->

            <div class="row" id="port2-second-row">
                <div class="col-xs-6 imgcont" id="port2-first-col">
                    <img src="//placehold.it/200x150/2255EE" alt="phuket" />
                </div> <!-- end col-sm-6 -->
                <div class="col-xs-6 imgcont" id="port2-second-col">
                    <img src="//placehold.it/200x150/2255EE" alt="julie" />
                </div> <!-- end col-sm-6 -->

            </div> <!-- end port-second-row -->
        </section> <!-- end portfolio-content -->