Changing the order of Grid Item stacking in material-ui

Question

I have a problem with the order of stacking of grid items whenever browser shrinks.

This is what I want on the normal desktop screen(lg):

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

But After Shrinking the browser I am getting the following result:

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

Can I with material ui Grid layout achieve this on a mobile screen:

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

I have read articles on changing the order of CSS-grids for the same topic but how to achieve this using material-ui Grid layout.

Answer 1

Edit: I have revised the answer for 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