Reorganización de la cuadrícula de reacción cuando se cambia el tamaño de la pantalla

Estoy tratando de crear un contenedor para una aplicación de reacción que tiene un gráfico highcharts y 3 cuadros de texto. Actualmente, estoy luchando para que los tres cuadros de texto se reorganicen debajo del componente de gráfico al cambiar el tamaño de la pantalla o cambiar a una vista móvil. ¿Cómo puedo lograr la funcionalidad deseada? Estoy usando react with hooks, mecanografiado y material UI.

Así es como se ve en este momento:

        <Container className={classes.boxTest2} maxWidth="xl">
          <Grid container spacing={1}>
            <Chart />
            <Grid item xs={3} md={2} lg={2}>
              <Paper className={classes.paper}>
                some info
                <Typography className={classes.tempStyle} variant="h5">
                  {round}&deg;C
                </Typography>
              </Paper>
            </Grid>
            <Grid item xs={3} md={2} lg={2}>
              <Paper className={classes.paper}>
                more info
              </Paper>
            </Grid>
            <Grid item xs={3} md={2} lg={2}>
              <Paper className={classes.paper}>
                even more info
              </Paper>
            </Grid>
          </Grid>
        </Container>

Aquí está el estilo:

  boxTest2: {
    display: "flex"
  },
  tempStyle: {
    color: "red",
    marginTop: "20px",
    textAlign: "center"
  },
  paper: {
    height: 200,
    flex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    elevation: 8,
    maxWidth: "150px"
  },