title: How to set multiple breakpoints on grid item in Material UI in React?
body: <p>I have a Layout HOC with Grid. Inside I have 4 Widget components with Grid items. I want these components to be displayed in the following manner:</p>
  
  <ul>
  <li>large screens: all 4 in 1 row</li>
  <li>medium screens: 2 in a row, 2 columns</li>
  <li>small screens: 1 widget taking full width, 4 rows</li>
  </ul>
  
  <p>So I configured it like this:</p>
  
  <pre><code>&lt;Grid item xs={12} sm={2} md={3}&gt;
    ...content
  &lt;/Grid&gt;
  </code></pre>
  
  <p>However, when I resize the screen it goes directly from 4 to 1.</p>
  
  <p>I tried to reconfigure the theme in my index.js:</p>
  
  <pre><code>const theme = createMuiTheme({
    breakpoints: {
      values: {
      md: 1100
      }
    } ,
    typography: {
      useNextVariants: true
    }
  });
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;MuiThemeProvider theme={theme}&gt;
        &lt;App /&gt;
      &lt;/MuiThemeProvider&gt;
    &lt;/Provider&gt;, document.getElementById('root')
  );
  </code></pre>
  
  <p>What else can I do? How can I make it work?</p>