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


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

Answer 1

在material-ui的深处，它只是一个Flexbox，Flexbox项具有css属性“ order”，您可以更改该顺序以适合您的需求，并将其添加到网格项样式

这里有一些参考资料

styles in material-ui来自官方网站
flex-box usage来自CSS技巧
Changing the order of Grid Item stacking in material-ui来自我们心爱的stackoverflow

Answer 2

您可以像这样使用订单属性

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-页面折叠时如何交换网格项目的左/右垂直放置

2 个答案: