col-Md-6 is not falling in mobile

Question

I have a section that in mobile instead of falling down this overlapping the whole div.

It’s supposed to look like this, but the image is getting over everything in mobile.

HTML

  <section class="second-section">
<div class="container">
  <div class="row align-items-center box-orange">
    <div class="col-md-6">
      <img class="w-100" src="img/campos.png">
    </div>
    <div class="col-md-6 ml-5 ml-md-0 text-center">
      <h3>lorem lorem lorem lorem lorem <div class="line"></div>
      </h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, esse dolore. Ex voluptatibus ipsum, perferendis alias at necessitatibus minima, sequi facilis odio illum nostrum provident expedita eaque modi animi quasi.
      </p>
    </div>
  </div>
</div>

CSS

.second-section{
.box-orange{
background-image:url('/img/fundo2.png');
height: 400px;
color: white;
margin-top: 10%;
margin-bottom: 10%;
img{
  height: 550px;
  margin-top: -10%;
  margin-left: 2%;
  object-fit: cover;
}
h3{
  font-size: 2.5em;
  margin-bottom: 5%;
  .line{
    width: 80%;
    border: 3px solid #77D3C2;
    position: absolute;
    left: 33%;
    top: 100%;
  }
}

p{
  font-size: 1.4em;
  padding: 0% 10%;
  }
 }
}

In inspecting element does not show the reason it is on top, is getting the same from CSS

---

Edit 1

After placing a media rule setting the img to auto she got like this.

In inspecting element it looks like height:auto;

Answer 1

Bootstrap grid rules are as follows:

Extra small <576px: Col-1 to Col-12,

Small 540px: Col-Sm-1 to Col-Sm-12,

Medium 768px: Col-Md-1 to Col-Md-12,

Large 992px: Col-lg-1 to Col-lg-12,

Extra Large 1200px: Col-Xl-1 to col-Xl-12,

In SCSS you can use as follows if it is a mobile smaller than 576px use like this: @extend .col-12;.

If it is a mobile larger or equal 576px can use this way: @extend .col-sm-12;.

This follows successively until the other visions, I hope to have helped you and removed your doubts