Как установить несколько точек останова для элемента сетки в пользовательском интерфейсе материалов в React?

У меня есть макет HOC с сеткой. Внутри у меня есть 4 компонента виджета с элементами сетки. Я хочу, чтобы эти компоненты отображались следующим образом:

• большие экраны: все 4 в 1 ряд
• средние экраны: 2 в ряд, 2 столбца
• маленькие экраны: 1 виджет на всю ширину, 4 строки

Итак, я настроил это так:

<Grid item xs = {12} sm = {2} md = {3}>
  ...content
</Grid>

Однако, когда я изменяю размер экрана, он сразу меняется с 4 на 1.

Я попытался перенастроить тему в своем index.js:

const theme = createMuiTheme({
  breakpoints: {
    values: {
    md: 1100
    }
  } ,
  typography: {
    useNextVariants: true
  }
});

ReactDOM.render(
  <Provider store = {store}>
    <MuiThemeProvider theme = {theme}>
      <App />
    </MuiThemeProvider>
  </Provider>, document.getElementById('root')
);

Что еще я могу сделать? Как я могу заставить его работать?