我有一个带有网格的布局 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')
);

我还可以做些什么？我怎样才能让它工作？