Html 网站的适应性布局

我为我的英语不好提前道歉，如果不是这样的话

您好，我需要帮助，如何在缩放手机时向下移动块

目前，如果你缩小屏幕，他们只是稍微缩小

下面是缩放时应如何迁移它们的示例

请帮忙，先谢谢你

以下是站点的区块布局代码：

部分{
位置：绝对位置；
z指数：0；
宽度：50%；
身高：50%；
溢出：隐藏；
-webkit转换：规模（1）；
变换：比例（1）；
改变：转变；
-webkit转换属性：全部；
过渡性质：全部；
-webkit转换持续时间：300ms；
过渡时间：300ms；
-webkit转换计时功能：轻松输入输出；
过渡定时功能：易进易出；
}
.部门：第一个孩子{
排名：0；
左：0；
背景：#F06060；
}
.组别：第n名儿童（2）{
排名：0；
左：50%；
背景#FA987D；
}
.组别：第n名儿童（3）{
最高：50%；
左：0；
背景：#72CCA7；
}
.组别：第n名儿童（4）{
最高：50%；
左：50%；
背景：#10A296；
}
.section.is-expanded{
排名：0；
左：0；
z指数：1000；
宽度：100%；
身高：100%；
}
.已展开项。节：未展开（.s）{
-webkit变换：缩放（0）；
变换：比例（0）；
不透明度：0；
}
.section.is-expanded{
能见度：可见；
不透明度：1；
-webkit转换：不透明度200ms线性300ms；
过渡：不透明度200ms线性300ms；
}
.演示盒{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
身高：100%；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
颜色：#fff；
字号：2rem；
字体大小：300；
}

第一节
第二节
第三节
第四节

---

试试这个我觉得很有用

使用引导网格系统遵循这个链接你试过使用@media查询吗？我建议你先读一读，然后自己解决。然后，如果你在某一点上卡住了，再贴一个有具体问题的问题。当前的问题表明您没有努力自己解决它，因此应该关闭它。@Shaik我不想使用bootstrapIt不会解决他的问题。你自己试试吧。节具有绝对位置，使用float:left不会影响它。

@media only screen and (max-width:480)
{  
   .section {
        width: 100%;
        height: 50%;
        float:left;
    }
}