如何在React中的物料界面中设置网格项的多个断点?

我有一个网格布局。在内部,我有4个带有网格项的小部件组件。我希望这些组件以以下方式显示:

• 大屏幕:四合一排
• 中等屏幕: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')
);

我还能做什么?我怎样才能让它工作?