Css 屏幕尺寸变化时堆叠元件的困难

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

我使用的是Paravel的Foldy Grids，在全桌面大小上，有3个div并排排列，但我希望它缩小到2个并排排列，然后在手机上，只有1个在另一个上面。然而，我感觉好像我正在将媒体查询应用于不正确的

。任何指导都将不胜感激。在CSS中，我之所以把33%放进去，是因为在全桌面模式下，div被分成了3个部分

CSS:

HTML:

第一格

第二格

第三格

第四格

第五格

第六格

我对Paravel的Foldy Grids不太清楚，因为它从未使用过，也没有太多时间阅读文档，但您可以通过在媒体查询中指定不同的大小来修复它，只需确保您的媒体查询需要位于桌面代码的下方即可

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

.dashboardIconsMod{
颜色：粉红色；
边框样式：实心；
边框颜色：红色；
宽度：33.33%；
}
*{框大小：边框框；}
.show grid.row{display:flex；flex wrap:wrap；}
@媒体屏幕和屏幕（最大宽度：900px）{
.dashboardIconsMod{
宽度：50%；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.dashboardIconsMod{
宽度：100%；
}
}

第一格

第二格

第三格

第四格

第五格

第六格

Atul，非常感谢，唯一一个似乎不喜欢它的是显示2个并排显示，但这一定与折叠网格有关，因此我将标记正确。非常感谢。如果您在上面讨论代码段结果，那么它的原因是，此代码段正文的宽度小于900，大于600px。我们写的代码是这样的，如果这是你正在谈论的其他东西，那么需要检查Foldy GridsAtul的文档，是的，不仅是代码片段，我的代码也是这样显示的，按照完全相同的顺序，2在顶行，1在下一行，2在下一行，然后是最后一行。我将玩一玩屏幕大小为px的游戏（也许：）

@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;
}

<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>