使用flex布局如何实现桌面端与移动端的内容排序差异？

你需要在最小宽度1400px的断点下，将页面主体调整为双列网格布局，左侧放置灰色项目信息栏，右侧放置正文内容，小于1400px时保留原有堆叠布局即可实现需求。

具体修改步骤 #

只需要在你的CSS代码中新增如下1400px断点的响应式规则即可，无需修改原有HTML结构：

@media (min-width: 1400px) {
  /* 页面主体切换为双列网格布局 */
  main.case-study {
    display: grid;
    /* 左列固定宽度放信息栏，右列放正文，最大宽度和你原有正文宽度一致 */
    grid-template-columns: 300px minmax(0, 768px);
    gap: 4rem;
    /* 整体内容水平居中 */
    justify-content: center;
    padding: 0 2rem;
  }

  /* 调整左侧信息栏样式 */
  main.case-study section:first-child .details__top {
    /* 取消原有底部外边距 */
    margin: 0;
    /* 可选：添加圆角匹配效果图样式 */
    border-radius: 8px;
    /* 让信息栏高度随内容自适应，不与正文等高 */
    align-self: flex-start;
    /* 可选：滚动时固定信息栏在左侧，不需要可以删除以下两行 */
    position: sticky;
    top: 2rem;
  }

  /* 信息栏内部容器宽度适配左列 */
  main.case-study section:first-child .details {
    width: 100%;
    padding: 0;
  }

  /* 正文容器宽度适配右列 */
  main.case-study section:last-child .details {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

效果说明 #

• 屏幕宽度小于1400px时，完全保留你原有的移动端、平板端展示逻辑，无任何变化
• 屏幕宽度≥1400px时，自动切换为左侧信息栏+右侧正文的双列布局，和预期效果图一致
• 可根据实际需要调整左列宽度、双列间距等参数，适配你的设计规范

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