Карты, которые я создал в Bootstrap 4, не реагируют на смену экранов

Question

Я создал несколько карт, используя bootstrap, html и css. К сожалению, когда я меняю размер экрана, карты не корректируются соответственно.

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

Когда я go для проверки и переключения на ipad, это выглядит так:

Я попытался использовать медиа-запрос в моей папке css, чтобы решить эту проблему, но безуспешно. Может кто-нибудь сказать мне, что я делаю не так? РЕДАКТИРОВАТЬ: В идеале, я хотел бы иметь одну карту поверх другой при изменении размера экрана. Я также хотел бы иметь интервал между картами.

<div class="col-md-4">       
   <div class="ScoreCard">
      <div>
         <h3 style="background-color:@item.TitleColor"> @item.ReportName - @item.TitleColor  </h3>
       </div>
<div class="col-lg-4">
     <div style="font-weight:bold; margin-top:35px;">
         <h1>GrossAmountDue</h1>
     </div>
</div>
 <div class="col-lg-2" style="margin-top:35px;">
     if (Flag == 1)
       {
        <i class="fas fa-circle" style="font-size:30px; color:red; margin-left:15px;"></i>
       }                                      
</div>
<div class="col-lg-6">
    <div>
       <p style="font-size:20px; margin-left: 25px;">Audited </p>
       <p style="font-size:20px; margin-left: 25px;">Packages: Will go here</p>
       <p style="font-size:20px; margin-left: 25px;">Transactions will go here</p>
       <p style="font-size:20px;"Icon will go here</p>
     </div>
</div>
<div class="row">
   <div class="col-lg-12" style="margin-top: 5px;">
        <p style="margin-left:17px;">Text Here</p>
  </div>
</div>
</div>
</div>
//CSS
<style>
    .ScoreCard {
        background-color: orange;
        width: 500px;
        min-height: 200px;
        border: 15px black;
    }

    @@media screen and (max-width: 100px){
        .col{
            width: 50%;
        }
    }
</style>

Answer 1

Вы должны обернуть свои столбцы в ряд следующим образом:

<div class="row">
    <div class="col-md-12 col-lg-4">
        <div class="card">...</div>
    </div>
    <div class="col-md-12 col-lg-4">
        <div class="card">...</div>
    </div>
    <div class="col-md-12 col-lg-4">
        <div class="card">...</div>
    </div>
</div>

Таким образом, когда у вас экран равен или меньше md, содержимое столбцов идет один поверх другого, но когда экран имеет значение lg или выше, у вас есть 3 столбца подряд.

INFO

В своем медиазапросе вы меняете класс col, когда вместо этого вы используете col-md-4