css - 更改material-ui中Grid Item堆叠的顺序

Question

每当浏览器缩小时，我对网格元素的堆叠顺序有疑问。

这是我想要在普通桌面屏幕上显示的内容(lg):

---------------------------------------------
|   col 1     |         col 2       | col 3 |
---------------------------------------------

但缩小浏览器后我得到以下结果:

-------------------------
|     col 1             |
-------------------------
-------------------------
|     col 2             |
-------------------------
-------------------------
|     col 3             |
-------------------------

我可以使用 material ui Grid 布局在移动屏幕上实现这一点吗:

-------------------------
|     col 1             |
-------------------------
-------------------------
|     col 3             |
-------------------------
-------------------------
|     col 2             |
-------------------------

我已阅读有关更改同一主题的 CSS 网格顺序的文章，但如何使用 material-ui 网格布局来实现此目的。

Answer 1

编辑:我修改了 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