crear un sitio con fines educativos, pero estoy atascado con el problema de altura de la cuadrícula / columna

Aquí hay una imagen del sitio que intento replicar:Haz click en mi

Esto es lo que tengo hasta ahora:Haz click en mi

Mi problema es que en la primera fila tengo dos columnas (col-sm-6) y en la primera columna anidé otra fila y creé 2 columnas adicionales dentro de ella. Sin embargo, la segunda columna parece ser más alta que la primera. Traté de ajustar el tamaño de la imagen pero pierde la capacidad de respuesta que necesito.

Espero que alguien haya entendido lo que estoy tratando de decir, soy realmente nuevo en el desarrollo web. Espero que alguien me pueda ayudar. :(

Consulte las imágenes adjuntas para verificar el problema. Gracias.

Mi código -

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