Changing the order of Grid Item stacking in material-ui

问题

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.

回答1:

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.

回答2:

Option n°1

const styles = theme => ({
  item2: {
    order: 3,
    [theme.breakpoints.up('sm')]: {
      order: 2,
    },
  },
  item3: {
    order: 2,
    [theme.breakpoints.up('sm')]: {
      order: 3,
    },
  },
});

// ...

<Grid container spacing={16} justify="flex-start">
  <Grid item xs={12} sm={6} md={4} lg={4}>
    <Paper className={classes.paper}>
      <h1>{1}</h1>
    </Paper>
  </Grid>
  <Grid item xs={12} sm={6} md={4} lg={4} className={classes.item2}>
    <Paper className={classes.paper}>
      <h1>{2}</h1>
    </Paper>
  </Grid>
  <Grid item xs={12} sm={6} md={4} lg={4} className={classes.item3}>
    <Paper className={classes.paper}>
      <h1>{3}</h1>
    </Paper>
  </Grid>
</Grid>

https://codesandbox.io/s/m5plooxxoj

Option n°2

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

https://codesandbox.io/s/xvv7o07614

来源：https://stackoverflow.com/questions/54726871/changing-the-order-of-grid-item-stacking-in-material-ui

标签

css

reactjs

layout

grid

material-ui