for context I want to have 2 divs if screen size is bigger than a phone screen, and 1 div if screen is small enough. Using material ui here how I attempted this:

<Grid container spacing={2}>
        <Grid item sx={{ display: {xs: 'none', sm: 'none', md: [12]}}} className='x1'>
            <TopLeft/>
        </Grid>

        <Grid item sx={{ display: {xs: 'none', sm: 'none', md: [12]}}} className='x2'>
            <TopRight/>
        </Grid>

        <Grid item sx={{ display: {xs: [12], sm: 'none', md: 'none'}}} className='x2'>
            <Top/>
        </Grid>

        <Grid item sx={{ display: {xs: '12'}}} className='x3'>
            <Bottom/>
        </Grid>
    </Grid>

My understanding was I could set the width for breakpoint sizes. So what I would want to do is have 2 divs displayed for sizes larger than 'xs', and for small screen sizes the top two divs would have display property as none, while the 3rd div would now have a width of 12 columns

Please let me know if I can provide more info