В настоящее время использую сетку MUI, и я ни в коем случае не эксперт. В настоящее время у меня есть сетка, которая по умолчанию выглядит так на вашем обычном экране 
if you make the screen a bit smaller all the way up until 600px the grid becomes mashed and looks kinda wonky like this
Once you get below 600 px the grid finally stacks like this
введите описание изображения здесь и я бы хотел, чтобы этот желаемый эффект произошел раньше, например, около 900 пикселей, есть ли способ достичь этого ??? Я пробовал почти все, но сетка не складывается, как я хотел бы на последней картинке. Моя сетка выглядит следующим образом:
<Grid
container
spacing={2}
className={classes.grid}
alignItems='center'
>
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ marginBottom: 20 }}
>
<Img
placeholder={BarhopPlace}
src={BarHop}
alt='barhop'
cache={false}
className={classes.image}
/>
</Grid>
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ width: "100%", textAlign: "center", padding: 0 }}
>
<Container
component='main'
maxWidth='xs'
style={{
marginBottom: 20,
visibility: ready ? "visible" : "hidden",
}}
>
<Typography
variant='h5'
variant='h5'
style={{ marginBottom: 10 }}
>
Bar Hop
</Typography>
<Typography variant='body2'>
A platform that provides users with the top drinking places
based on their location. Technologies used: ReactJS, NodeJS,
JavaScript, and the Yelp API .
</Typography>
<br />
<Box className={classes.alumniChips}>
<Tooltip
title='Please Note: Hosted on free tier of Heroku, site takes a few minutes to load'
aria-label='add'
>
<a
rel='noopener noreferrer'
href='https://barhop-wyncode.herokuapp.com/'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<LanguageIcon />}
label='View Site'
clickable
color='primary'
/>
</a>
</Tooltip>
<a
rel='noopener noreferrer'
href='https://github.com/Rterrell25/Bar_Hop_React_App'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<GitHubIcon />}
label='View Code'
clickable
color='primary'
/>
</a>
<BarHopModal />
</Box>
</Container>
</Grid>
<br />
<Divider style={{ width: "100%" }} />
<br />
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ marginTop: 20, marginBottom: 20 }}
>
<Img
placeholder={OddjobsPlace}
src={Oddjobs}
alt='oddjobs'
cache={false}
className={classes.image}
/>
</Grid>
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ width: "100%", textAlign: "center", padding: 0 }}
>
<Container
component='main'
maxWidth='xs'
style={{
marginBottom: 20,
visibility: ready ? "visible" : "hidden",
}}
>
<Typography
variant='h5'
variant='h5'
style={{ marginBottom: 10 }}
>
Odd Jobs
</Typography>
<Typography variant='body2'>
A platform that pairs consumers with reliable contractors.
Technologies used: ReactJS, Ruby on Rails, PostgreSQL, Calendly
Integration and Google Maps API.
</Typography>
<br />
<Box className={classes.alumniChips}>
<Tooltip
title='Please Note: Hosted on free tier of Heroku, site takes a few minutes to load'
aria-label='add'
>
<a
rel='noopener noreferrer'
href='https://oddjobs-react.herokuapp.com/'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<LanguageIcon />}
label='View Site'
clickable
color='primary'
/>
</a>
</Tooltip>
<a
rel='noopener noreferrer'
href='https://github.com/Rterrell25/Oddjobs_React_App'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<GitHubIcon />}
label='View Code'
clickable
color='primary'
/>
</a>
<OddjobsModal />
</Box>
</Container>
</Grid>
<br />
<Divider style={{ width: "100%" }} />
<br />
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ marginTop: 20 }}
>
<Img
placeholder={JobTrackerPlace}
src={JobTracker}
cache={false}
alt='JobTracker'
className={classes.image}
/>
</Grid>
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ width: "100%", textAlign: "center", padding: 0 }}
>
<Container
component='main'
maxWidth='xs'
style={{
marginBottom: 20,
visibility: ready ? "visible" : "hidden",
}}
>
<Typography variant='h5' style={{ marginBottom: 10 }}>
JobTracker
</Typography>
<Typography variant='body2'>
A platform that allows recent graduates from Wyncode Academy to
track job applications, store resume's, and monitor follow ups.
Technologies used: ReactJS, NodeJS, Google Cloud Functions, and
Google Firestore.
</Typography>
<br />
<Box className={classes.alumniChips}>
<a
rel='noopener noreferrer'
href='https://jobtracker.netlify.app/'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<LanguageIcon />}
label='View Site'
clickable
color='primary'
/>
</a>
<a
rel='noopener noreferrer'
href='https://github.com/Rterrell25/JobTracker_Client'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<GitHubIcon />}
label='View Code'
clickable
color='primary'
/>
</a>
<JobTrackerModal />
</Box>
</Container>
</Grid>
</Grid>
Извините за длинный пост !! Спасибо!