响应式布局咨询：桌面端图文分栏、移动端上下堆叠如何实现

问题原因 #

你当前的.row容器默认设置为横向flex布局，移动端媒体查询中没有修改flex排布方向，所以一直保持左右分栏效果。同时现有HTML结构中文字块在前、图片块在后，要实现移动端图片在上的效果无需修改HTML结构，调整flex属性即可。

修改方案 #

找到你CSS代码末尾的@media(max-width: 700px)规则，按如下内容调整：

@media(max-width: 700px){
    /* 原有样式保留 */
    .about-col h1{
        font-size: 14px;
    }
    .about-col p{
        font-size: 10px;
    }
    .about-col{
        /* 将原有flex-basis:48%改为100%，占满整行宽度 */
        flex-basis: 100%;
        padding: 20px 5px;
    }
    .about-col img{
        width: 100%;
    }
    /* 新增以下两行代码即可实现需求 */
    .row {
        /* 纵向排列+反转顺序，实现图片在上文字在下 */
        flex-direction: column-reverse;
    }
}

规则说明 #

• flex-direction: column-reverse会让flex容器内的元素改为纵向排布，同时颠倒原有元素顺序，刚好将原本在后面的图片列移到上方，文字列移到下方
• .about-col的flex-basis改为100%，确保每个模块占满整行宽度，不会出现挤在同一行的问题

如果你不希望使用反转排序，也可以直接调换HTML中两个.about-col的顺序（把图片列放前面、文字列放后面），然后将上面的flex-direction: column-reverse改为flex-direction: column，效果完全一致。

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