Leave images together and responsive

Question

I need to let the images meet one under the other, occupying half of the container and next to you the description of this image.

She needs to stay that way.

At the moment she’s like this

But there it is occupying only the defined size col-md-6, and it should occupy about 60% of the entire container, side by side of the screen, and the content should be centered, but the content when it decreases the screen is getting over the image.

My doubt is how to leave the images together there, one touching the other in the lower right corner of the first and upper left of the second

      <div class="container">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-6">
          <div class='img-container'>
            <img class="img-fluid" src="img/img-servico-1.jpg" alt="Estádio de futebol">
            <div class='triangle'></div>
          </div>
        </div>
        <div class="col-md-6 mt-5">
          <h4 class="text-left">Lorem..</h4>
          <h6 class="text-left mb-5">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur, veniam!
          </h6>
          <ul class="lista p-0 m-0">
            <li class="d-flex mb-2 align-items-center"><i class="fas fa-angle-right mt-1 mr-3" aria-hidden="true"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis velit repellat repudiandae?
            </li>
            <li class="d-flex mb-2 align-items-center"><i class="fas fa-angle-right mt-1 mr-3" aria-hidden="true"></i>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto dolorem temporibus veritatis itaque. </li>
            <li class="d-flex mb-2 align-items-center"><i class="fas fa-angle-right mt-1 mr-3" aria-hidden="true"></i>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora, esse animi deserunt ullam distinctio alias.
            </li>
          </ul>
          <p class="pt-5"><a class="button button-rouded btn-big js-scroll" href="#sobre" role="button">Saiba Mais</a></p>
        </div>
      </div>
    </div>

    <div class="col-md-12">
      <div class="row">

        <div class="col-md-6 mt-5">
          <h4 class="text-right">Lorem ipsum dolor sit amet..</h4>
          <h6 class="text-right mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis?
          </h6>
          <ul class="lista p-0 m-0">
            <li class="d-flex text-right mb-2 align-items-center"></i>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatem voluptatum ratione ut! Perspiciatis, eos aperiam atque neque at esse praesentium sit, doloribus dolor blanditiis a excepturi incidunt? Quis, quibusdam? <i class="fas fa-angle-left mt-1 ml-3"
                aria-hidden="true"></i>
            </li>
            <li class="d-flex text-right mb-2 align-items-center"></i>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis ab quis neque inventore quisquam placeat, suscipit error officia eveniet! Iste nam minus perferendis nihil ullam facere accusamus obcaecati porro delectus?
              <i class="fas fa-angle-left mt-1 ml-3" aria-hidden="true"></i></li>

          </ul>
          <p class="pt-4"><a class="button button-rouded btn-big js-scroll" href="#sobre" role="button">Saiba Mais</a></p>
        </div>

        <div class="col-md-6">
          <div class='img-container'>
            <img class="img-fluid" src="img/img-servico-2.jpg" alt="Estádio de futebol">
            <div class='triangle-left'></div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS OF THE IMAGE

.img-container {
   width: 500px;
   height: 500px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}

.img-container > img {
    height: 100%;
}

Answer 1

Cara follows an option, she uses the image as background-image of div and not with the tag <img>, but if it is essential to use the tag <img> tell me, because it is also possible to adapt with it, the problem is that it is crossbrowser, because it uses properties that are not accepted in older browsers...

This CSS that you are using is not cool, it is not responsive because it has fixed values. I also needed to make some adjustments to your HTML, because the way you set up the Grid was not cool. See how I did and take as a basis...

Look at this template I made. In CSS I created two classes, one with each image, and I put it right into div col- Display under "Full Page" to see responsiveness.

OBS: I needed to make a @media screen and (max-width: 767px) to say that on screen below that the image div will have a height of 300px. I left commented in the code

.bg1,
.bg2 {
  background-image: url(https://placecage.com/200/200);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bg2 {
  background-image: url(https://fillmurray.com/200/200);
}

@media screen and (max-width: 767px)  {
  .bg1,
  .bg2 {
    height: 300px !important; /* altura mínama pra imagem quando a tela for menor que 575px*/
  }
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="container">
  <div class="row">
    <!-- imagem -->
    <div class="col-md-6 bg1"></div>

    <div class="col-md-6 mt-5">
      <h4 class="text-left">Lorem..</h4>
      <h6 class="text-left mb-5">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur, veniam!
      </h6>
      <ul class="lista p-0 m-0">
        <li class="d-flex mb-2 align-items-center"><i class="fas fa-angle-right mt-1 mr-3" aria-hidden="true"></i>Lorem
          ipsum dolor sit amet, consectetur adipisicing elit. Omnis velit repellat repudiandae?
        </li>
        <li class="d-flex mb-2 align-items-center"><i class="fas fa-angle-right mt-1 mr-3" aria-hidden="true"></i>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto dolorem temporibus veritatis itaque.
        </li>
        <li class="d-flex mb-2 align-items-center"><i class="fas fa-angle-right mt-1 mr-3" aria-hidden="true"></i>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora, esse animi deserunt ullam distinctio
          alias.
        </li>
      </ul>
      <p class="pt-5"><a class="button button-rouded btn-big js-scroll" href="#sobre" role="button">Saiba Mais</a></p>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <h4 class="text-right">Lorem ipsum dolor sit amet..</h4>
      <h6 class="text-right mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis?
      </h6>
      <ul class="lista p-0 m-0">
        <li class="d-flex text-right mb-2 align-items-center">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatem voluptatum ratione ut!
          Perspiciatis, eos aperiam atque neque at esse praesentium sit, doloribus dolor blanditiis a excepturi
          incidunt? Quis, quibusdam? <i class="fas fa-angle-left mt-1 ml-3" aria-hidden="true"></i>
        </li>
        <li class="d-flex text-right mb-2 align-items-center">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis ab quis neque inventore quisquam
          placeat, suscipit error officia eveniet! Iste nam minus perferendis nihil ullam facere accusamus
          obcaecati porro delectus?
          <i class="fas fa-angle-left mt-1 ml-3" aria-hidden="true"></i></li>
      </ul>
      <p class="pt-4"><a class="button button-rouded btn-big js-scroll" href="#sobre" role="button">Saiba Mais</a></p>
    </div>

    <!-- imagem -->
    <div class="col-md-6 bg2"></div>
  </div>
</div>