Looking at the image below, it seems that the blue block is rendered below both the red and green blocks. I actually need the blue block to render directly underneath the red block.
Is there a way to achieve this layout adjustment using MUI grid?
import * as React from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
export default function BasicList() {
return (
<Box>
<Grid container>
<Grid item alignContent="center" justifyContent="center" md={6}>
<Box style={{backgroundColor:"red"}} height={200}>
MD = 6 Height = 200
</Box>
</Grid>
<Grid item md={6}>
<Box style={{backgroundColor:"green"}} height={600}>
MD = 6 Height = 600
</Box>
</Grid>
<Grid item md={6}>
<Box style={{backgroundColor:"blue"}} height={200}>
MD = 6 Height = 200
</Box>
</Grid>
</Grid>
</Box>
);
}