移动端视图下如何调整列布局实现图片置于文字上方

API 探路者

2026-9-29

使用@media查询完全可以实现你要的布局效果，仅需修改现有CSS的移动端适配部分即可，无需改动HTML结构。

具体修改方案

你当前的关于页布局基于flex实现，桌面端的左右两列布局不需要调整，只需要在max-width:700px的移动端媒体查询规则中，新增flex容器的排序规则即可，修改后的CSS代码如下：

@media(max-width: 700px){
    /* 新增flex布局规则，实现图片在上文字在下 */
    .row {
        /* 垂直排列 + 颠倒顺序 把后面的图片区块移到最前面 */
        flex-direction: column-reverse;
    }
    .about-col{
        /* 移动端单列布局占满宽度 */
        flex-basis: 100%;
        padding: 20px 5px;
        /* 可选：移动端文字居中更美观 */
        text-align: center;
    }
    .about-col img{
        width: 100%;
        /* 图片和下方文字加间距 */
        margin-bottom: 20px;
    }
    /* 你原有其他移动端样式保留即可 */
    .about-col h1{
        font-size: 14px;
    }
    .about-col p{
        font-size: 10px;
    }
    .sub-header h1{
        margin-top: 80px;
    }
    .timeline h3{
        font-size: 14px;
    }
    .timeline h4{
        font-size: 14px;
    }
    .timeline p{
        font-size: 10px;
    }
}