Bootstrap Responsive div collapse

Question

I have a page divided in half. On one side I have a giant box and on the other side I have a set of cards. When I inspect the page or increase / reduce its size, the cards are no longer responsive. The small cards are above the large box. The goal is that when they cross, the cards will go down.

Does anyone help me make this responsive? Thank you very much

HTML

  <div class="col-md-6">
    <div class="row">
      <div class="col-6">
        <div class="card" style="margin-left: 16px; margin-right: 16px; line-height: 1;">
          <div class="card-header header">
            <h1> M </h1>
          </div>
          <div class="card-body">
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card" style="margin-left: 8px; margin-right: 16px;">
          <div class="card-header header">
            <h1> I </h1>
          </div>
          <div class="card-body">

          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        <div class="card card-small" style="margin-left: 16px; margin-right: 16px; margin-top: 16px;">
          <div class="card-header header">
            <h1> C </h1>
          </div>
          <div class="card-body" style="overflow: auto;">

          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card card-small" style="margin-left: 8px; margin-right: 16px; margin-top: 16px;">
          <div class="card-header header">
            <h1> D </h1>
          </div>
          <div class="card-body" style="overflow: auto;">

          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card card-small" style="margin-left: 16px; margin-right: 16px; margin-top: 16px;">
          <div class="card-header header">
            <h1> S </h1>
          </div>
          <div class="card-body" style="overflow: auto;">

          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card card-small" style="margin-left: 8px; margin-right: 16px; margin-top: 16px;">
          <div class="card-header header">
            <h1> T </h1>
          </div>
          <div class="card-body" style="overflow: auto;">

          </div>
        </div>
      </div>
      </div>
  </div>
</div>

CSS:

.Title{
    width: 150px;
    height: 30px;
    font-family: 'Noto Sans';
    font-size: 20px;
    letter-spacing: 0;
    color: #4D4F5C;

}

.header{
  width: 435px;
  height: 40px;
  background: #ECF2F9 0% 0% no-repeat padding-box;
  border-radius: 8px 8px 0px 0px;
}

.header h1{

text-align: center;
font-family:'Noto Sans';
font-size: 14px;
letter-spacing: 0;
color: #4D4F5C;
}

Answer 1

The reason they aren't responsive is because you have the cards and the .drop item set to fix widths using px's. Try setting the width of the items using percentages.