Material UI - how to swap left/right vertical placement of grid items when page collapsed

Question

In the code below when the page is collapsed the Left grid item element is placed at the top of the page and the Right grid element is below it. I want to swap this so that the Right element is on top and the Left element is below it when the page is collapsed. I want to know the "Material UI way" to do this - if their is such a thing.

function Test(props){

  const { classes } = props;
  return (
     <div className = {classes.bgImage}> 

      <Grid container classes={classes.root} spacing={2}>
      <Grid item lg={6} spacing={1}>
         <Paper>

          Left



         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque commodo tellus. Donec elit diam, accumsan non mi et, pellentesque pretium leo. Morbi pretium odio ut urna blandit, vel congue tellus vehicula. Aenean pharetra mi justo, et sagittis eros luctus vitae. Pellentesque adipiscing vestibulum sapien. Ut quis mauris ac diam facilisis elementum. Nam mattis nisl a metus placerat rutrum.

         In sed lacinia lacus, et dictum sem. Morbi semper venenatis sapien, vel tincidunt justo. Aliquam eu nunc id massa fermentum hendrerit. Suspendisse at justo rhoncus, varius turpis ut, sodales sem. Suspendisse suscipit, arcu vitae luctus aliquam, quam urna malesuada neque, ac mollis justo dolor eu sem. Vestibulum fringilla dui sit amet arcu luctus tincidunt. In blandit, arcu eu rhoncus mollis, ligula tellus volutpat 


         </Paper>
        </Grid>
        <Grid item lg={6} spacing={1}>
         <Paper>        

          Right


        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque commodo tellus. Donec elit diam, accumsan non mi et, pellentesque pretium leo. Morbi pretium odio ut urna blandit, vel congue tellus vehicula. Aenean pharetra mi justo, et sagittis eros luctus vitae. Pellentesque adipiscing vestibulum sapien. Ut quis mauris ac diam facilisis elementum. Nam mattis nisl a metus placerat rutrum.

        In sed lacinia lacus, et dictum sem. Morbi semper venenatis sapien, vel tincidunt justo. Aliquam eu nunc id massa fermentum hendrerit. Suspendisse at justo rhoncus, varius turpis ut, sodales sem. Suspendisse suscipit, arcu vitae luctus aliquam, quam urna malesuada neque, ac mollis justo dolor eu sem. Vestibulum fringilla dui sit amet arcu luctus tincidunt. In blandit, arcu eu rhoncus mollis, ligula tellus volutpat urna, sit amet laoreet odio erat dapibus erat. Phasellus porta dui sed 

         </Paper>
        </Grid>
      </Grid>
    </div>
  )
}

score 0 · Answer 1 · answered Oct 31 '19 at 18:52

Deep inside the material-ui, It's just a flexbox, Flexbox items have a css property 'order', you can alter that order to suit your needs, add it to the grid item styles

here're some refrences

styles in material-ui from official website
flex-box usage from css-tricks
Changing the order of Grid Item stacking in material-ui from our beloved stackoverflow

score 0 · Accepted Answer · answered Oct 31 '19 at 19:43

you can use the order property like this

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  gridItem1: {
    [theme.breakpoints.down("lg")]: {
      order:2
    }
  },
  gridItem2: {
    [theme.breakpoints.down("lg")]: {
      order:1
    }
  },
.
.
//other styles
.
.
}));

// ..

  const classes = useStyles();
  return (
     <div className = {classes.bgImage}> 

      <Grid container classes={classes.root} spacing={2}>
      <Grid item lg={6} spacing={1} classes={gridItem1}>
         <Paper>

          Left



         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque commodo tellus. Donec elit diam, accumsan non mi et, pellentesque pretium leo. Morbi pretium odio ut urna blandit, vel congue tellus vehicula. Aenean pharetra mi justo, et sagittis eros luctus vitae. Pellentesque adipiscing vestibulum sapien. Ut quis mauris ac diam facilisis elementum. Nam mattis nisl a metus placerat rutrum.

         In sed lacinia lacus, et dictum sem. Morbi semper venenatis sapien, vel tincidunt justo. Aliquam eu nunc id massa fermentum hendrerit. Suspendisse at justo rhoncus, varius turpis ut, sodales sem. Suspendisse suscipit, arcu vitae luctus aliquam, quam urna malesuada neque, ac mollis justo dolor eu sem. Vestibulum fringilla dui sit amet arcu luctus tincidunt. In blandit, arcu eu rhoncus mollis, ligula tellus volutpat 


         </Paper>
        </Grid>
        <Grid item lg={6} spacing={1} classes={gridItem2}>
         <Paper>        

          Right


        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque commodo tellus. Donec elit diam, accumsan non mi et, pellentesque pretium leo. Morbi pretium odio ut urna blandit, vel congue tellus vehicula. Aenean pharetra mi justo, et sagittis eros luctus vitae. Pellentesque adipiscing vestibulum sapien. Ut quis mauris ac diam facilisis elementum. Nam mattis nisl a metus placerat rutrum.

        In sed lacinia lacus, et dictum sem. Morbi semper venenatis sapien, vel tincidunt justo. Aliquam eu nunc id massa fermentum hendrerit. Suspendisse at justo rhoncus, varius turpis ut, sodales sem. Suspendisse suscipit, arcu vitae luctus aliquam, quam urna malesuada neque, ac mollis justo dolor eu sem. Vestibulum fringilla dui sit amet arcu luctus tincidunt. In blandit, arcu eu rhoncus mollis, ligula tellus volutpat urna, sit amet laoreet odio erat dapibus erat. Phasellus porta dui sed 

         </Paper>
        </Grid>
      </Grid>
    </div>
  )
}

Material UI - how to swap left/right vertical placement of grid items when page collapsed

2 Answers2