左边是普通桌面视图,右边是移动视图。 其实我可以用
sx={{ display: {xs: "none", sm: "none", md: "block"} }}
来做到这一点,但我想知道有没有其他方法可以这样做?
<Grid container spacing={2}>
<Grid item xs={12} sm={12} md={7} order={{ xs: 1, sm: 1, md: 0 }}>
1
</Grid>
<Grid item xs={12} sm={12} md={5} order={{ xs: 0, sm: 0, md: 1 }}>
2
</Grid>
<Grid item xs={12} sm={12} md={5} order={2}>
3
</Grid>
</Grid>
如上面的代码,它可以在移动视图中正常工作,但在桌面视图中,第三个网格项在第二个网格项下方。
因此,我尝试在第二个网格项之后添加另一个网格项:
{first grid}
{second grid}
<Grid item xs={0} sm={0} md={7} order={2} />
<Grid item xs={12} sm={12} md={5} order={3}>
3
</Grid>
是的,它的工作,但第一个网格项目实际上是动态高度,当它变长时,第三个网格项目被推到底部。