MUI Grid System - reactjs

Question

Currently using MUI grid system, and I am by no means an expert. I have currently have a grid that looks like this by default on you typical screen
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
and I would like this desired effect to happen way before like around 900 px is there a way to achieve this??? Ive tried almost everything but the grid won't stack like i would like in the last picture. My grid is as follows:
<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>
Sorry for the long post!! Thanks!

Answer 1

All you should need to do is change sm={6} to md={6} (see https://material-ui.com/customization/breakpoints/#breakpoints). sm is 600px and up, md is 960px and up. Then your items will be full-width (12 columns) from 0px (xs) up till 960px (md).