Tengo 3 elementos de Grid (ver código a continuación); En el dispositivo móvil, me gustaría que el elemento de la cuadrícula de la izquierda y la derecha se mostraran sobre el elemento de la cuadrícula del medio y en la vista de tableta me gustaría que se mostraran encima del medio y uno al lado del otro. ¿Cómo logro esto?
Estoy usando: 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>
Encontré la respuesta yo mismo al final desplazándome por muchas páginas de desbordamiento de pila; así es como lo implementé :)
<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>
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras