How to enable automatic break in the Material UI Grid (with nested grids) (avoid explicit direction="column")?

I was trying to create layout with top panel (2*2 grid) and bottom (rows) panel (1 cell) with the following Material UI code:

        <Grid container xs={12}>
            <Grid container item xs={12}>
                <Grid container item xs={12} md={6}>
                    <Grid container item xs={12} md={6}>
                        1st column, 1st row
                    </Grid>
                    <Grid container item xs={12} md={6}>
                        1st column, 2nd row
                    </Grid>
                </Grid>
                <Grid container item xs={12} md={6}>
                    <Grid container item xs={12} md={6}>
                        2nd column, 1st row
                    </Grid>
                    <Grid container item xs={12} md={6}>
                        2nd column, 2nd row
                    </Grid>
                </Grid>
            </Grid>
            <Grid container item>
                Rows
            </Grid>
        </Grid>

I expected that the grid system would automatically detect that 1st-column/1st-row and 1st-column/2nd-row each took 6 columns and that the parent (1st-column) was only 6 columns wide and that is why the 1st-column/1st-row and 1st-column/2nd-row would be put in the separate rows automatically (one under another). But that didn't happen. Why it didn't happen?

I had to specify the direction explicitly to achieve the intended placement (2*2 cells):

        <Grid container xs={12}>
            <Grid container item xs={12}>
                <Grid container item xs={12} md={6} direction="column">
                    <Grid container item xs={12} md={6}>
                        1st column, 1st row
                    </Grid>
                    <Grid container item xs={12} md={6}>
                        1st column, 2nd row
                    </Grid>
                </Grid>
                <Grid container item xs={12} md={6} direction="column">
                    <Grid container item xs={12} md={6}>
                        2nd column, 1st row
                    </Grid>
                    <Grid container item xs={12} md={6}>
                        2nd column, 2nd row
                    </Grid>
                </Grid>
            </Grid>
            <Grid container item>
                Rows
            </Grid>
        </Grid>

This code worked as expected, but I feel that the use of explicit specification of the direction is not flexible.

How to correct the first block to arrive at the 2*2 placement in the first (upper) item?

Additional Info: The following code (without md={6} for "cell" <div>) solved my problem without introcution direction. I am confused - whether the breakpoints (12 column convention) starts at each container separately? My guess is that 2 6-column containers should allow 6-column wide childrens to order themselves into new lines automatically.

    <Grid container xs={12}>
        <Grid container item xs={12}>
            <Grid container item xs={12} md={6}>
                <Grid container item xs={12}>
                    1st column, 1st row
                </Grid>
                <Grid container item xs={12}>
                    1st column, 2nd row
                </Grid>
            </Grid>
            <Grid container item xs={12} md={6}>
                <Grid container item xs={12}>
                    2nd column, 1st row
                </Grid>
                <Grid container item xs={12}>
                    2nd column, 2nd row
                </Grid>
            </Grid>
        </Grid>
        <Grid container item>
            Rows
        </Grid>
    </Grid>