material-ui 响应式网格：如何在移动设备上对齐左右列以移动到中间列上方

Question

I have 3 Grid items (see code below); On mobile I would like the left and the right grid item to display above the middle grid item and on tablet view i would like them to display above the middle one and next to eachother. How do i achieve this?

I am using : https://material-ui.com/components/grid/

      <Grid item xs={12} md={3} sm={6}>
        <ProductList
          productgroup={this.state.product.group}
          productnumber={this.state.product.number}
          handleProductSelect={this.handleProductSelect}
          productlist={this.props.productlist}
          theme={this.props.selectedTheme} />
      </Grid>

      <Grid item xs={12} md={6} sm={12}>
        <TableProduct product={this.state.product} parameters={this.state.parameters} />
      </Grid>

      <Grid item xs={12} md={3} sm={6}>
        <ParameterSelect product={this.state.product} parameters={this.state.parameters} onChange={this.handleInputChange} />
      </Grid>

    </Grid>

Answer 1

I found the answer my self in the end by scrolling a lot of stack overflow pages; this is how i implemented it :)

  <Grid container direction="row" justify="center" alignItems="center" spacing={3} className={classes.gridWidth}>
          <Box clone order={{ xs: 1, sm: 1, md: 1 }}>
          <Grid item xs={12} md={3} sm={6}>
            <ProductList
              productgroup={this.state.product.group}
              productnumber={this.state.product.number}
              handleProductSelect={this.handleProductSelect}
              productlist={this.props.productlist}
              theme={this.props.selectedTheme} />
            </Grid>
          </Box>
          <Box clone order={{ xs: 3, sm: 3, md: 2 }}>
            <Grid item xs={12} md={6} sm={12}>
            <TableProduct product={this.state.product} parameters={this.state.parameters} />
            </Grid>
          </Box>
          <Box clone order={{ xs: 2, sm: 2, md: 3}}>
          <Grid item xs={12} md={3} sm={6}>
            <ParameterSelect product={this.state.product} parameters={this.state.parameters} onChange={this.handleInputChange} />
            </Grid>
          </Box>
        </Grid>