Grid布局适配：768px+屏幕如何调换第二行图文位置

针对你给出的Grid基础代码，要实现屏幕宽度≥768px时第二行图片在右侧、文本在左侧的效果，这里提供两种实用方案：

方案一：精准指定网格列位置 #

利用CSS :nth-child() 选择器定位第二行的元素，直接设置它们的网格列起止位置：

.container{
   display:grid;
   gap:20px;
   grid-template-columns: repeat(12, 1fr); /* 修正原代码repeat后的空格，避免语法错误 */
}
.container >*{
   grid-column: span 12; /* 简化grid-column-start为grid-column */
}
@media(min-width:768px){
   .item{
      grid-column: span 6;
   }  
   /* 第二行图片（第3个item）占据右侧6列 */
   .item:nth-child(3){
      grid-column: 7 / span 6;
   }
   /* 第二行文本（第4个item）占据左侧6列 */
   .item:nth-child(4){
      grid-column: 1 / span 6;
   }
}

方案二：用order属性调整渲染顺序 #

如果需要后续所有偶数行都保持图片在右、文本在左的布局，这种方法更高效，通过修改元素的渲染顺序实现：

.container{
   display:grid;
   gap:20px;
   grid-template-columns: repeat(12, 1fr); /* 修正原代码语法错误 */
}
.container >*{
   grid-column: span 12;
}
@media(min-width:768px){
   .item{
      grid-column: span 6;
   }  
   /* 偶数组的图片（第3、7...个item）后置 */
   .item:nth-child(4n-1){
      order: 2;
   }
   /* 偶数组的文本（第4、8...个item）前置 */
   .item:nth-child(4n){
      order: 1;
   }
}

关键提示 #

原代码中 repeat (12, 1fr) 的空格属于语法错误，必须改为 repeat(12, 1fr)，否则Grid布局无法正常生效。

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