title: material-ui responsive grid: how to align right and left column to move above middle column on mobile
body: <p>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?</p>
  
  <p>I am using : <a href="https://material-ui.com/components/grid/" rel="nofollow noreferrer">https://material-ui.com/components/grid/</a></p>
  
  <p></p>
  
  <pre><code>      &lt;Grid item xs={12} md={3} sm={6}&gt;
          &lt;ProductList
            productgroup={this.state.product.group}
            productnumber={this.state.product.number}
            handleProductSelect={this.handleProductSelect}
            productlist={this.props.productlist}
            theme={this.props.selectedTheme} /&gt;
        &lt;/Grid&gt;
  
        &lt;Grid item xs={12} md={6} sm={12}&gt;
          &lt;TableProduct product={this.state.product} parameters={this.state.parameters} /&gt;
        &lt;/Grid&gt;
  
        &lt;Grid item xs={12} md={3} sm={6}&gt;
          &lt;ParameterSelect product={this.state.product} parameters={this.state.parameters} onChange={this.handleInputChange} /&gt;
        &lt;/Grid&gt;
  
      &lt;/Grid&gt;
  </code></pre>