列在移动视图中没有响应

Question

我正在开发电子商务网站这是一个大学项目，在该网站上我有过滤器和产品列表。它在笔记本电脑上工作正常，但当我在手机上打开它时，产品列表的卡片就会出现在过滤器下面。但我想让它响应，两列都应该增加和减小它们的大小相应的屏幕尺寸。我是网络设计的新手，请帮助我。

类m是一个空类，我刚刚使用它，因为使用它可以很好地查看所有内容。

＆＃13;

＆＃13;

  @media screen and (max-width: 480px) {
  section.slider {
    padding-top: 0%;
  }
  .mini-menu .sub>ul {
    height: 0;
    overflow: hidden;
    background: #fff;
  }
  .mini-menu .sub>ul>li>a {
    font-family: sans-serif;
    color: #FEFEFE;
    font-size: 12px;
    display: block;
    text-decoration: none;
    padding: .7em 1em;
    text-transform: capitalize;
    font-style: normal;
    letter-spacing: 1px;
  }
  .cards {
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    height: 50%;
    margin: 1rem;
    width: 97%;
    position: relative;
    text-align: center;
  }

＆＃13;

<div class="m">
  <div class="col-md-2">
    <div class="menu">
      <div class="mini-menu">
        <ul>
          <li class="sub">
            <a href="#">RAM<span style="float:right;"><i class="fa fa-chevron-down"></i></span></a>
            <ul>
              <li>
                <input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
                <label class="checkbox-label" for="checkbox1" style="color: #212121;">Less than 512 MB</label>
              </li>
              <li>
                <input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
                <label class="checkbox-label" for="checkbox1" style="color: #212121;">512 MB - 1 GB</label>
              </li>

            </ul>
          </li>
          <li class="sub">
            <a href="#">BRAND<span style="float:right;"><i class="fa fa-chevron-down"></i></span></a>
            <ul>
              <li>
                <input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
                <label class="checkbox-label" for="checkbox1" style="color: #212121;">HP</label>
              </li>
              <li>
                <input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
                <label class="checkbox-label" for="checkbox1" style="color: #212121;">Dell</label>
              </li>

            </ul>
          </li>
          <li class="sub">
            <a href="#">CUSTOMER RATINGS<span style="float:right;"><i class="fa fa-chevron-down"></i></span></a>
            <ul>
              <li>
                <input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
                <label class="checkbox-label" for="checkbox1" style="color: #212121;">4 <i class="fa fa-star"></i> & above</label>
              </li>

            </ul>
          </li>
        </ul>
      </div>
      <div class="menu-price menu-item">
        <div class="header-item">Price<span style="float:right;"><i class="fa fa-chevron-down"></i></span></div>
        <p>
          <input type="text" readonly id="amount" style="border:0; color:#f6931f; font-weight:bold;">
        </p>
        <div id="slider-range"></div>
      </div>
    </div>
  </div>

  <div class="col-md-10">
    <div class="cards card4">

      <div class="carousel slide" id="myCarousel2" data-ride="carousel" data-interval="000" data-pause="hover">
        <div class="carousel-inner">
          <div class="item active">
            <div class="col-xs-3">
              <a href="computers/computers1.html"><img src="computers/img/lenovo.png" alt=" " class="img-responsive" /></a>

            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel2" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
      <a class="right carousel-control" href="#myCarousel2" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
    <div class="clearfix"></div>
  </div>
  <div class="cards card4">
    <div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="000" data-pause="hover">
      <div class="carousel-inner">
        <div class="item active">
          <div class="col-xs-3">
            <a href="computers/computers1.html"><img src="computers/img/dell.jpeg" alt=" " class="img-responsive" /></a>
            <p>
              <br> Dell Core i3 6th Gen <br> Rs 29,990 <br>
            </p>
          </div>
        </div>

      </div>
    </div>
    <div class="clearfix"></div>
  </div>

＆＃13;

＆＃13;

＆＃13;