reactjs - Change Grid item column order on small screens

Question

I'm attempting to have a grid looking like this for larger displays:

and this for smaller sizes:

Currently the skeleton of my grid is succinctly like this:

<Fragment>
  <Grid container spacing={3}>
    <Grid item xs={12} md={6}>
      <img src={img1} />
    </Grid>
    <Grid item xs={12} md={6}>
      <Paper>Text Content 1...</Paper>
    </Grid>
  </Grid>

  <Grid container spacing={3}>
    <Grid item xs={12} md={6}>
      <Paper>Text Content 2...</Paper>
    </Grid>
    <Grid item xs={12} md={6}>
      <img src={img2} />
    </Grid>
  </Grid>
</Fragment>

How can I do such as in mobile view (width 12) the first Grid item from the second Grid container (Text content 2) displays after (below) the image?

标签： reactjsmaterial-ui

Answer 1

Use like this:

<Grid container>
          <Grid spacing={3} container item xs={12} md={12}>
            <Grid item xs={12} md={6} className={classes.item}>
              <img
                width="50px"
                src="https://cdn3.vectorstock.com/i/1000x1000/37/37/simple-cartoon-a-cute-bear-vector-18823737.jpg"
                alt="abc"
              />
            </Grid>
            <Grid container item xs={12} md={6} className={classes.item}>
              <Paper>Text Content 1...</Paper>
            </Grid>
          </Grid>

          <Grid container item spacing={3} xs={12} md={12} className="flexgrid">
            <Grid container item xs={12} md={6} className={classes.item}>
              <Paper>Text Content 2...</Paper>
            </Grid>
            <Grid container item xs={12} md={6} className={classes.item}>
              <img
                width="50px"
                src="https://cdn3.vectorstock.com/i/1000x1000/37/37/simple-cartoon-a-cute-bear-vector-18823737.jpg"
                alt="abd"
              />
            </Grid>
          </Grid>
</Grid>

SOURCE

PREVIEW

for re-order added:

<Grid container item spacing={3} xs={12} md={12} className="flexgrid">

and css :

@media screen and (max-width: 720px) {
  .flexgrid{
    flex-direction: column-reverse
  }
  
}