如何通过媒体查询交换CSS Grid布局中div元素的显示顺序？

你可以通过CSS Grid提供的子元素排序能力实现顺序调换，不需要修改现有HTML结构，有两种常用实现方式：

方案1：使用grid-row显式指定行位置 #

在你的900px断点的媒体查询里，直接给两个侧边元素指定对应的行号即可，代码修改如下：

@media only screen and (max-width: 900px) {
    .signup{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 80% auto;
        height: 140vh;
        background-color: cadetblue;
    }
    .left-side {
        /* 指定小鸟logo区域放在第二行 */
        grid-row: 2;
    }
    .right-side {
        /* 指定注册表单区域放在第一行 */
        grid-row: 1;
    }
}

方案2：使用order属性调整排序 #

Grid子元素支持order属性，属性值越小排布位置越靠前，默认所有元素的order值为0，你也可以通过修改order值实现调换，代码修改如下：

@media only screen and (max-width: 900px) {
    .signup{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 80% auto;
        height: 140vh;
        background-color: cadetblue;
    }
    .left-side {
        order: 2;
    }
    .right-side {
        order: 1;
    }
}

两种方案都可以稳定实现需求：如果后续需要扩展更多子元素，用order属性批量调整会更灵活；如果只有两个固定元素排布，用grid-row指定位置的可读性更强。

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