создать сайт в образовательных целях, но я застрял с проблемой высоты сетки / столбца.

Вот изображение сайта, которое я пытаюсь воспроизвести:Нажми на меня

Вот что у меня так далеко:Нажми на меня

Моя проблема в том, что в первой строке у меня есть два столбца (col-sm-6), а в первом столбце я вложил еще одну строку и создал в ней 2 дополнительных столбца. Тем не менее, вторые столбцы, кажется, выше, чем первый. Я попытался отрегулировать размер img, но он теряет необходимую отзывчивость.

Надеюсь, кто-то понял, что я пытаюсь сказать, я действительно новичок в веб-разработке. Я надеюсь, что кто-то может мне помочь. :(

Пожалуйста, обратитесь к изображениям, прикрепленным, чтобы проверить проблему. Благодарю.

Мой код -

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