如何不修改HTML代码调整inline-block元素的移动端布局顺序？

没问题，咱们完全可以通过CSS Grid来实现你要的布局效果，而且不需要修改任何HTML代码。核心思路是在屏幕宽度≤767px时，把容器改成网格布局，通过网格线定位来安排三个元素的位置。

修改后的完整CSS代码 #

.wrapper { 
  background: #fff; 
  width: 100% 
} 
.firstElement, .secondElement, .thirdElement { 
  display: inline-block; 
  width: calc(100%/3) 
} 
.firstElement { background: #000; color: #fff } 
.secondElement { background: grey } 
.thirdElement { background: #ddd } 

@media (max-width: 767px) {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 分成两等宽列 */
    gap: 0; /* 可根据需求调整元素间距，此处保持无间距 */
  }
  .firstElement, .secondElement, .thirdElement {
    width: auto; /* 取消原calc宽度，让网格自动分配空间 */
    display: block; /* 覆盖inline-block，避免默认的行内元素间距 */
  }
  .firstElement {
    grid-column: 1;
    grid-row: 1; /* 第一个元素定位在第一列第一行 */
  }
  .secondElement {
    grid-column: 1;
    grid-row: 2; /* 第二个元素定位在第一列第二行 */
  }
  .thirdElement {
    grid-column: 2;
    grid-row: 1 / span 2; /* 第三个元素占据第二列的全部两行空间 */
  }
}

关键逻辑说明 #

• 给.wrapper启用网格布局，通过grid-template-columns将容器划分为两个等宽列；
• 重置三个元素的宽度属性，让网格系统自动适配元素尺寸；
• 利用grid-column和grid-row属性精准控制每个元素的网格位置，实现前两个垂直排列、第三个跨两行横向并列的效果。

这样就能完美匹配你要的移动端布局啦！

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