Change Grid item column order on small screens - reactjs

Question

I'm attempting to have a grid looking like this for larger displays:
and this for smaller sizes:
Currently the skeleton of my grid is succinctly like this:
<Fragment>
<Grid container spacing={3}>
<Grid item xs={12} md={6}>
<img src={img1} />
</Grid>
<Grid item xs={12} md={6}>
<Paper>Text Content 1...</Paper>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} md={6}>
<Paper>Text Content 2...</Paper>
</Grid>
<Grid item xs={12} md={6}>
<img src={img2} />
</Grid>
</Grid>
</Fragment>
How can I do such as in mobile view (width 12) the first Grid item from the second Grid container (Text content 2) displays after (below) the image?

Answer 1

Use like this:
<Grid container>
<Grid spacing={3} container item xs={12} md={12}>
<Grid item xs={12} md={6} className={classes.item}>
<img
width="50px"
src="https://cdn3.vectorstock.com/i/1000x1000/37/37/simple-cartoon-a-cute-bear-vector-18823737.jpg"
alt="abc"
/>
</Grid>
<Grid container item xs={12} md={6} className={classes.item}>
<Paper>Text Content 1...</Paper>
</Grid>
</Grid>
<Grid container item spacing={3} xs={12} md={12} className="flexgrid">
<Grid container item xs={12} md={6} className={classes.item}>
<Paper>Text Content 2...</Paper>
</Grid>
<Grid container item xs={12} md={6} className={classes.item}>
<img
width="50px"
src="https://cdn3.vectorstock.com/i/1000x1000/37/37/simple-cartoon-a-cute-bear-vector-18823737.jpg"
alt="abd"
/>
</Grid>
</Grid>
</Grid>
SOURCE
PREVIEW
for re-order added:
<Grid container item spacing={3} xs={12} md={12} className="flexgrid">
and css :
#media screen and (max-width: 720px) {
.flexgrid{
flex-direction: column-reverse
}
}