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.

Olivier Tassinari · Answer 1 · 2021-09-12T13:24:33.897

66

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

edited Sep 12 '21 at 13:24

answered Feb 19 '19 at 09:03

Olivier Tassinari

8,238
4
23
23

1

Thanks for sharing more than one solution. It would be more useful if you can add an explanation so that people who are new to material UI can understand better. – Hemadri Dasari Jun 02 '20 at 05:02
2

I would prefer option 2 – Hemadri Dasari Jun 02 '20 at 07:42
1

This is coming from the co founder of MUI so is the best solution right now. Thanks – Worm Aug 28 '20 at 09:02

uneet7 · Accepted Answer · 2021-07-15T13:03:33.990

Extending to Olivier's answer Material-UI heavily uses the CSS flexbox layout within its implementation. As the documentation quotes

A flex container is the box generated by an element with a computed display of flex or inline-flex. In-flow children of a flex container are called flex items and are laid out using the flex layout model.

So Grid items are flex items and Grid Container is flexbox container in laymans language. Hence we can use the order property on Grid items to change their relative order of appearance when the Box or Grid Container resizes. So passing the style in the following manner to the grid item should work out

  itemStyle: {
    order: ${Desired_order_before_Shrinking},

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

Finally doing <Grid item xs={12} md={6} className={this.props.classes.itemStyle}> will reorder that item. Hope it creates better understanding.

UPDATE: Material UI V5. Thanks to @Adam Cooper's answer below

<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>

score 7 · Answer 3 · answered Jul 14 '21 at 12:13

With material-ui v5 this can be achieved more elegantly using the order prop together with the new responsive style system:

<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>

Changing the order of Grid Item stacking in material-ui

3 Answers3

Linked