在material-ui中更改网格项目堆叠的顺序

Question

每当浏览器缩小时，我都会遇到网格项的堆叠顺序问题。

这是我在普通桌面屏幕（lg）上想要的：

---------------------------------------------
|   col 1     |         col 2       | col 3 |
---------------------------------------------

但是在缩小浏览器后，我得到以下结果：

-------------------------
|     col 1             |
-------------------------
-------------------------
|     col 2             |
-------------------------
-------------------------
|     col 3             |
-------------------------

我可以使用材料ui Grid布局在移动屏幕上实现此功能吗

-------------------------
|     col 1             |
-------------------------
-------------------------
|     col 3             |
-------------------------
-------------------------
|     col 2             |
-------------------------

我已经阅读了有关更改同一主题的CSS网格顺序的文章，但是如何使用material-ui Grid布局实现这一点。

Answer 1

选项n°1

const styles = theme => ({
  item2: {
    order: 3,
    [theme.breakpoints.up('sm')]: {
      order: 2,
    },
  },
  item3: {
    order: 2,
    [theme.breakpoints.up('sm')]: {
      order: 3,
    },
  },
});

// ...

<Grid container spacing={16} justify="flex-start">
  <Grid item xs={12} sm={6} md={4} lg={4}>
    <Paper className={classes.paper}>
      <h1>{1}</h1>
    </Paper>
  </Grid>
  <Grid item xs={12} sm={6} md={4} lg={4} className={classes.item2}>
    <Paper className={classes.paper}>
      <h1>{2}</h1>
    </Paper>
  </Grid>
  <Grid item xs={12} sm={6} md={4} lg={4} className={classes.item3}>
    <Paper className={classes.paper}>
      <h1>{3}</h1>
    </Paper>
  </Grid>
</Grid>

https://codesandbox.io/s/m5plooxxoj

选项n°2

    <Grid container spacing={16} justify="flex-start">
      <Grid item xs={12} sm={6} md={4} lg={4}>
        <Paper className={classes.paper}>
          <h1>{1}</h1>
        </Paper>
      </Grid>
      <Box clone order={{ xs: 3, sm: 2 }}>
        <Grid item xs={12} sm={6} md={4} lg={4}>
          <Paper className={classes.paper}>
            <h1>{2}</h1>
          </Paper>
        </Grid>
      </Box>
      <Box clone order={{ xs: 2, sm: 3 }}>
        <Grid item xs={12} sm={6} md={4} lg={4}>
          <Paper className={classes.paper}>
            <h1>{3}</h1>
          </Paper>
        </Grid>
      </Box>
    </Grid>

https://codesandbox.io/s/xvv7o07614

Answer 2

扩展到Olivier的答案Material-UI在其实现中大量使用CSS flexbox布局。如文档所引用

  

flex容器是由元素生成的框，具有计算的flex或inline-flex显示。 flex容器的流入子元素称为flex项，并使用flex布局模型进行布局。

因此，网格项目是弹性项目，而网格容器是通俗易懂语言的弹性框容器。因此，当Box或Grid Container调整大小时，我们可以使用Grid项上的order属性来更改其相对外观顺序。因此，以以下方式将样式传递到网格项应该可以解决

  itemStyle: {
    order: ${Desired_order_before_Shrinking},

    [theme.breakpoints.up('${DesiredScreenSize}')]: {
      order: ${Desired_order_after_Shrinking},
    },

  }

最后执行<Grid item xs={12} md={6} className={this.props.classes.itemStyle}>将对该项目重新排序。希望它能增进理解。

Answer 3

使用 material-ui v5 可以更优雅地使用 order prop 和新的响应式样式系统：

<Grid container spacing={2}>
  <Grid item md={12} lg={4} order={{ md: 1, lg: 1 }}>col 1</Grid>
  <Grid item md={12} lg={4} order={{ md: 3, lg: 2 }}>col 2</Grid>
  <Grid item md={12} lg={4} order={{ md: 2, lg: 3 }}>col 3</Grid>
</Grid>