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 xs={12} md={6} lg={6}>
            <Gallery
              images={product.images.map((image) => ({
                src: image.url,
                altText: image.altText
              }))}
            />
          </Grid>
          <Grid item xs={12} md={6} lg={6} container direction="column">
            <Grid item>
              <ProductDescription product={product} />
            </Grid>
            <Grid item>
              <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?