Material UI - 如何在页面折叠时交换网格项目的左/右垂直位置

Question

在下面的代码中，当页面折叠时，左侧网格项目元素位于页面顶部，右侧网格元素位于页面下方。我想交换它，以便在页面折叠时 Right 元素位于顶部，Left 元素位于其下方。我想知道“材料 UI 方式”来做到这一点 - 如果他们是这样的话。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         </Paper>        </Grid>      </Grid>    </div>  )}

Answer 1

您可以像这样使用 order 属性

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>

  )

}