相同HTML下用CSS3实现不同分辨率的区块排序与多列布局问题

可行实现方案 #

方案1：最小改动原生多列布局（兼容性最优） #

只需要在你原有大屏多列布局的基础上，给左列最后一个区块加强制换列属性即可，完全不需要调整其他逻辑，修改后的大屏CSS如下：

@media screen and (min-width: 1024px) {
   .production-container{
        column-count: 2;
        column-gap: 50px;
        max-width: 1024px;
        background: linear-gradient( var(--text-light-color), var(--text-light-color) ) no-repeat center/1px 100%; /* 中心竖分割线 */
   }
   .production-block {
        margin: 0 0 10px 0;
        break-inside: avoid;
        max-width: 520px;
    }
    /* 新增：强制在区块3后换列，确保1/2/3在左列，4/5在右列 */
    .production-block-3 {
        break-after: column;
    }
}

这个方案完全复用你原有代码逻辑，改动只有1行，兼容性覆盖所有现代浏览器，不会出现区块列分配错乱、多余空白的问题。

方案2：Grid布局方案（可扩展性更强） #

如果后续需要调整布局规则更灵活，可以用Grid布局，配合砌墙式布局规则解决空白问题：

/* 小屏样式保留你原来的逻辑即可，无需修改 */
@media screen and (max-width: 1023px) {
    .production-container{
        display: grid;
        grid-template-columns: 1fr;
        padding: 0 var(--standard-margin);
        justify-content: stretch;
        min-height: 200px;
    }

    aside.production-block{
        max-width: 100vw;
        width: 100%;
        display: grid;
        grid-template-rows: 1fr auto;
        margin: 24px 0;
        break-inside: avoid;
    }

    .production-container > .production-block-4 { order: 1; }
    .production-container > .production-block-1 { order: 2; }
    .production-container > .production-block-2 { order: 3; }
    .production-container > .production-block-5 { order: 4; }
    .production-container > .production-block-3 { order: 5; }
}

@media screen and (min-width: 1024px) {
   .production-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: masonry; /* 砌墙布局，消除不同行高度差带来的空白 */
        column-gap: 50px;
        max-width: 1024px;
        background: linear-gradient( var(--text-light-color), var(--text-light-color) ) no-repeat center/1px 100%;
   }
   .production-block {
        margin: 0 0 10px 0;
        max-width: 520px;
    }
    /* 强制指定区块所属列 */
    .production-block-1,
    .production-block-2,
    .production-block-3 {
        grid-column: 1;
    }
    .production-block-4,
    .production-block-5 {
        grid-column: 2;
    }
}

两种方案都不需要修改原有HTML结构，完全符合你的响应式需求。

内容的提问来源于stack exchange，提问作者J.BizMai