Reponsive Grid MUI with order

I’m trying to achieve the following responsive Grid:

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

For desktop I’ve already set up the needed code:

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

My question has to do with the order of the items. On mobile the nested grid item container should not apply giving the possibility to order items like the attached image.
Is it possible to achieve without hiding and duplicating content?