Grid with responsive order

[Bersaelor]

Hey there,

so it would be really awesome if suid could responsively reorder grid-items:

<Grid container spacing={2}>
  <Grid item md={12} lg={4} order={{ md: 1, lg: 1 }}>col 1</Grid>
  <Grid item md={12} lg={4} order={{ md: 3, lg: 2 }}>col 2</Grid>
  <Grid item md={12} lg={4} order={{ md: 2, lg: 3 }}>col 3</Grid>
</Grid>

like Material UI 5 can.

[Bersaelor]

I know we could use something like:

  const lg = useMediaQuery(useTheme().breakpoints.up('lg'));
  // ...
 <Grid item md={12} lg={4} container order={ lg() ? 0 : 1}>

but unfortunately useMediaQuery doesn't work with SSR.

[Bersaelor]

I also tried it with styled, i.e.

const FirstGridItem = styled(Grid)(({ theme }) => ({
  order: 1,
  [theme.breakpoints.up('md')]: {
    order: 0,
  }
}))

but then it'll ignore the lg and xl steps, i.e.

          <FirstGridItem item xs={12} md={4} lg={3} xl={2} container flex={1}  />

will always stay width 4. If I use plain <Grid> it'll use the steps lg and xl, but then I don't reordering along the breakpoints.

[juanrgm]

Try this:

<Grid item md={12} lg={4} sx={{ md: 1, lg: 1 }}>
  col 1
</Grid>

[juanrgm]

On the other hand, there is no support yet for system properties with breakpoints, eg:

<Box color={{ xs: "red", sm: "blue" }} />

[Bersaelor]

On the other hand, there is no support yet for system properties with breakpoints, eg:

<Box color={{ xs: "red", sm: "blue" }} />

That would be really nice to have :)