带订单的响应式网格 MUI

Question

我正在尝试实现以下响应式网格：

https://i.sstatic.net/ARfMpH8J.png

对于桌面，我已经设置了所需的代码：

         <Grid container spacing={2}>
          <Grid item sm={12} lg={6} order={{ sm: 2, lg: 1 }}>
            <Gallery
              images={product.images.map((image) => ({
                src: image.url,
                altText: image.altText
              }))}
            />
          </Grid>
          <Grid item sm={12} lg={6} container direction="column" order={{ sm: 1, lg: 2 }}>
            <Grid item>
              <ProductDescription product={product} />
            </Grid>
            <Grid item order={{ sm: 3, lg: 2 }}>
              <Typography variant="titolo-1">$99.99</Typography>
            </Grid>
          </Grid>
        </Grid>

我的问题与项目的顺序有关。在移动设备上，不应应用嵌套网格项目容器，从而可以订购附加图像等项目。 是否可以在不隐藏和复制内容的情况下实现？

Answer 1

这是更新的代码。尝试一下，我会等待您的反馈。

import { Grid, Typography } from '@mui/material';

<Grid container spacing={2}>
  <Grid item xs={12} lg={6} sx={{ order: { xs: 2, lg: 1 } }}>
    <Gallery
      images={product.images.map((image) => ({
        src: image.url,
        altText: image.altText
      }))}
    />
  </Grid>
  <Grid item xs={12} lg={6} sx={{ order: { xs: 1, lg: 2 } }}>
    <ProductDescription product={product} />
    <Typography variant="titolo-1">$99.99</Typography>
  </Grid>
</Grid>