移动端优先布局：如何在1024px下将偶数盒子放左、奇数盒子放右？

需求说明 #

采用移动端优先方案搭建布局，针对1024px及以上的笔记本屏幕做适配：

• 布局包含11个带编号的元素，使用flex-wrap实现换行排列
• 移动端下元素全屏宽度排列
• 1024px+屏幕下，元素分为两列，要求偶数编号元素（浅海绿色）在左侧，奇数编号元素（橙色）在右侧，且保持元素的上下顺序（如2在左、1在右，4在左、3在右，以此类推）

之前的尝试及问题 #

1. 使用order属性分组奇偶元素：

   .item:nth-child(odd) {
       order: 2;
   }
   .item:nth-child(even) {
       order: 1;
   }
   

   问题：所有偶数元素集中在上半部分，奇数元素集中在下半部分，不符合按行互换位置的要求。

2. 使用Grid布局：

   .main-content {
       display: grid;
       grid-template-columns: 1fr;
       gap: 10px;
       padding: 10px;
   }
   @media (min-width: 1024px) {
       .main-content {
           grid-template-columns: 1fr 1fr;
       }
       .item:nth-child(odd) {
           grid-column: 2;
       }
       .item:nth-child(even) {
           grid-column: 1;
       }
   }
   

   问题：实现了奇偶分左右，但出现不必要的空白间隙。

解决方案（基于Flex布局） #

在1024px+的媒体查询中，给每个偶数元素设置order: -1，让它排在前一个奇数元素的前面，同时保持Flex容器的换行和间距设置。这样既不会打乱整体的上下顺序，又能实现每行内的奇偶位置互换。

修改后的完整CSS代码 #

/* Mobile First */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.main-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 10px;
}

.item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
  flex: 1 1 100%;
}

.main-content>.item:nth-child(odd) {
  background-color: orange;
}

.item:nth-child(even) {
  background-color: lightseagreen;
}

/* Laptop Layout */
@media (min-width: 1024px) {
  .main-content {
    justify-content: space-between;
  }
  .item {
    flex: 0 0 48%;
    box-sizing: border-box;
  }
  /* 核心修改：让每个偶数项排在前一个奇数项之前 */
  .item:nth-child(even) {
    order: -1;
  }
}

效果说明 #

• 移动端：元素全屏宽度依次排列，奇偶颜色正常显示
• 1024px+屏幕：
  • 每行显示两个元素，偶数元素在左，奇数元素在右（如2左1右、4左3右...）
  • 最后一个奇数元素（11）单独占一行，宽度为48%，默认靠左排列（若需要居中，可给.item:last-child添加margin-left: auto; margin-right: auto;）

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