How to use MUI to stack components on top of eachother?

Question

I want a div that looks like this on Desktop:

------------------------------------------------------------------
|  (icon)   |           (content)                  |(button here)|
------------------------------------------------------------------

to look like this on mobile:

--------------------------
|(icon)|    (content)    |
--------------------------
|      (button here)     |
--------------------------

I have tried using Card and CardHeader, but they don't give me the results I want on mobile:

  <Card sx={{ width: "90%", marginBottom: 2 }}>
    <CardHeader
        avatar={<img src={icon} style={{ maxWidth: "100%" }} />}
        action={
          <Button
            onClick={onClick}
            variant="contained"
            sx={{
              width: "173px",
              height: "48px",
              letterSpacing: 1.4,
            }}
          >
            {buttonText}
          </Button>
        }
        title={children}
        subheader={subContent}
      />
    </Card>

I would prefer an alternative to Card. Grid doesn't seem to have stackable capabilities, so not sure what to do there... Thank you.

Answer 1

From your illustration above, it sounds like Grid is exactly what you're looking for, as Grid is specifically for responsive layouts. You can use a combination of the xs, sm, md, lg, and xl props to define how much space, in the 12 column layout, that you want each item to occupy at a given breakpoint. For example, in your case:

<Grid container>
  <Grid item xs={4} sm={2}>
    (icon)
  </Grid>
  <Grid item xs={8} sm={8}>
    (content)
  </Grid>
  <Grid item xs={12} sm={2}>
    (button here)
  </Grid>
</Grid>

sm+:

xs:

Working example for your use case: https://codesandbox.io/s/basicgrid-material-demo-forked-q795q?file=/demo.js:0-725

Answer 2

MUI Stack component is usually great for stacking [1]: https://mui.com/material-ui/react-stack/ I have played with it below a little bit but check out the spec maybe its may save you a lot

import { Stack } from '@mui/material'
 
{ isMobile ? <Stack justifyItems="center" sx={{ width: `100%` }}>
    <Stack direction="row" spacing={12} alignItems="center" sx={{ margin: `auto` }}>
        <p>Icon</p>
        <p>Content</p>
     </Stack>
     <Stack sx={{ margin: `auto auto` }}>
        <button>Button here</button>
     </Stack>
</Stack> : <Stack direction="row" spacing={12} alignItems="center">
        <p>Icon</p>
        <p>Content</p>
        <button>Button here</button>
</Stack> }