I am looking for a way to style a div differently on Desktop and Mobile devices:
------------------------------------------------------------------
| (icon) | (content) |(button here)|
------------------------------------------------------------------
On mobile, I want it to look like this:
--------------------------
|(icon)| (content) |
--------------------------
| (button here) |
--------------------------
I have experimented with using Card and CardHeader components, but they do not provide the desired outcome 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 am open to alternatives to using Card component. I have considered Grid but unsure about its stackable capabilities. Any suggestions would be appreciated. Thank you.