编辑：我已经修改了 MUI Core v5 的答案

    <Grid container spacing={16} justify="flex-start">
      <Grid item xs={12} sm={6} md={4} lg={4}>
        <Paper>
          <h1>{1}</h1>
        </Paper>
      </Grid>
      <Grid item xs={12} sm={6} md={4} lg={4} order={{ xs: 3, sm: 2 }}>
        <Paper>
          <h1>{2}</h1>
        </Paper>
      </Grid>
      <Grid item xs={12} sm={6} md={4} lg={4} order={{ xs: 2, sm: 3 }}>
        <Paper>
          <h1>{3}</h1>
        </Paper>
      </Grid>
    </Grid>

https://codesandbox.io/s/xvv7o07614?file=/src/GridStacking.js

扩展到 Olivier 的答案 Material-UI 在其实现中大量使用 CSS flexbox 布局。作为文档引用

flex 容器是由具有 flex 或 inline-flex 计算显示的元素生成的框。弹性容器的流入子项称为弹性项目，并使用弹性布局模型进行布局。

所以网格项目是弹性项目，网格容器是外行语言中的弹性盒容器。因此，当 Box 或 Grid Container 调整大小时，我们可以使用 Grid 项目的 order 属性来更改它们的相对外观顺序。因此，以下列方式将样式传递给网格项应该可以解决

  itemStyle: {
    order: ${Desired_order_before_Shrinking},

    [theme.breakpoints.up(`${DesiredScreenSize}`)]: {
      order: ${Desired_order_after_Shrinking},
    },
 
  }

最后做<Grid item xs={12} md={6} className={this.props.classes.itemStyle}>将重新排序该项目。希望它能产生更好的理解。

更新：Material UI V5。感谢@Adam Cooper 在下面的回答

<Grid container spacing={2}>
  <Grid item md={12} lg={4} order={{ md: 1, lg: 1 }}>col 1</Grid>
  <Grid item md={12} lg={4} order={{ md: 3, lg: 2 }}>col 2</Grid>
  <Grid item md={12} lg={4} order={{ md: 2, lg: 3 }}>col 3</Grid>
</Grid>

使用 material-ui v5，可以使用 order prop 和新的响应式样式系统更优雅地实现这一点：

<Grid container spacing={2}>
  <Grid item md={12} lg={4} order={{ md: 1, lg: 1 }}>col 1</Grid>
  <Grid item md={12} lg={4} order={{ md: 3, lg: 2 }}>col 2</Grid>
  <Grid item md={12} lg={4} order={{ md: 2, lg: 3 }}>col 3</Grid>
</Grid>