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

Question

在下面的代码中，当页面折叠时，左侧网格项元素放置在页面顶部，右侧网格元素位于其下方。我想交换它，以便在页面折叠时 Right 元素位于顶部，Left 元素位于其下方。我想知道执行此操作的“Material 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


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

标签： javascriptcssreactjsmaterial-ui

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