媒体查询中注释flex属性无效，段落仍并排显示问题求助

你犯了个典型的CSS错误：注释掉属性不等于覆盖原有样式。全局样式里给.par设置的display:flex会一直生效，除非你在媒体查询里明确用另一个值覆盖它，只注释掉属性根本没用——CSS不会因为你注释就删掉之前的规则。

要实现移动端段落上下排列，你需要在媒体查询里做两件事：

• 给.par设置display: block，彻底替换掉原来的flex布局
• 把.flexpar的宽度改成100%，让每个段落占满容器宽度

修改后的CSS代码如下：

.par {
width: 983px;
height: 194px;
display:flex;
justify-content: center;
column-gap: 84px;
margin: 0 auto;
padding-top: 5px;
padding-bottom: 30px;
}

.flexpar {
    width: 50%;
}

@media (max-width: 768px) {
.par {
    width: 445px;
    height: auto; /* 建议改成auto，避免上下排列后内容溢出 */
    display: block; /* 关键：替换flex布局为块级布局 */
    margin: 0 auto;
    padding-top: 5px;
    padding-bottom: 30px;
}
 
.flexpar {
    width: 100%; /* 让段落占满容器，自然上下排列 */
}
}

另外建议把移动端的.par高度改成auto，因为两个段落上下排列后，高度很可能超过固定的194px，会导致内容被截断。

内容的提问来源于stack exchange，提问作者Dataman