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

Question

我有 3 个网格项目（见下面的代码）；在移动设备上，我希望左右网格项目显示在中间网格项目上方，而在平板电脑视图上，我希望它们显示在中间网格项目上方并彼此相邻。我如何做到这一点？

我正在使用：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

我最终通过滚动很多堆栈溢出页面找到了自己的答案；这就是我实现它的方式:)

  <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>