在屏幕大小改变时堆叠元素的困难

Question

当屏幕较小时，我很难将div堆叠在一起，一旦我达到手机大小，就会堆叠在另一个上面。

我正在使用Paravel的Foldy Grid，在全桌面大小上，有3个div并排，但我希望将其缩小到2个并排，然后在手机上，只有1个在另一个之上。然而，我觉得我好像是在把媒体查询应用到不正确的<div>上。任何指导都会非常感谢。在CSS中，我投入33%的原因是因为在全桌面模式下，div被分成了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 Grid 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>

​