在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

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

一个 flex 容器是由一个元素生成的盒子，它具有 flex 或 inline-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}>将重新排序该项目。希望它能产生更好的理解。

更新：Material UI V5。感谢@Adam Cooper 在下面的回答

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

Answer 2

在 Material-ui v5 中，使用 order 属性和新的响应式样式系统可以更优雅地实现这一点：

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

Answer 3

选项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