在屏幕尺寸变化时难以堆叠元素

Question

当屏幕尺寸较小时，我很难将我的divs堆叠在一起，一旦达到手机尺寸，就会堆叠在一起。

我使用的是Paravel的Foldy Grids，在桌面大小时，有3个div并排，但我想把它缩小到2个并排，然后在手机上，只有1个叠在一起。但是我觉得我把媒体查询应用到了不正确的地方。<div>'s. 如果有任何指导，将非常感谢。在CSS中，我放了33%的原因是由于在全桌面模式下divs被分成了3份。

CSS:

@media screen and (max-width: 900px) {
  .dashboardIconsMod {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .dashboardIconsMod {
    width: 100%;
  }
}

.dashboardIconsMod {
    color: pink;
    border-style: solid; 
    border-color: red;
}

HTML:

<section id="content">
  <div class="container">
    <section id="grid" class="clearfix">
      <div class="cf show-grid">
        <div class="row">
          <div class="grid-2 dashboardIconsMod">
            <!-- 1st Div -->
            <p> 1st Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 2nd Div -->
            <p> 2nd Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 3rd Div -->
            <p> 3rd Grid </p>
          </div>
        </div>


        <div class="row">
          <div class="grid-2 dashboardIconsMod">
            <!-- 4th Div -->
            <p> 4th Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 5th Div -->
            <p> 5th Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 6th Div -->
            <p> 6th Grid </p>
          </div>
        </div>

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

Answer 1

我不清楚Foldy Grids by Paravel，因为我从来没有用过它，也没有太多的时间去看文档，但是你可以通过给媒体查询不同的大小来解决这个问题，只要确保你的媒体查询需要在你的桌面代码下面。

目前，桌面上有3个项目，在iPad等小屏幕上有2个项目，在600px以下的小屏幕上，有一个项目。

.dashboardIconsMod {
    color: pink;
    border-style: solid; 
    border-color: red;
    width:33.33%;
}
* {box-sizing: border-box;}
.show-grid .row {display:flex; flex-wrap: wrap;}
@media screen and (max-width: 900px) {
  .dashboardIconsMod {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .dashboardIconsMod {
    width: 100%;
  }
}

<section id="content">
  <div class="container">
    <section id="grid" class="clearfix">
      <div class="cf show-grid">
        <div class="row">
          <div class="grid-2 dashboardIconsMod">
            <!-- 1st Div -->
            <p> 1st Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 2nd Div -->
            <p> 2nd Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 3rd Div -->
            <p> 3rd Grid </p>
          </div>
        </div>


        <div class="row">
          <div class="grid-2 dashboardIconsMod">
            <!-- 4th Div -->
            <p> 4th Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 5th Div -->
            <p> 5th Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 6th Div -->
            <p> 6th Grid </p>
          </div>
        </div>

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