如何在MUI中实现基于屏幕尺寸切换网格项位置？

你可以利用MUI的响应式断点系统和CSS的order属性来实现这个需求，以下是两种常用的实现方式：

方法一：使用Grid组件实现 #

MUI的Grid组件本身支持断点配置，结合order属性可以轻松切换元素顺序：

import { Grid, Typography } from '@mui/material';

function ResponsiveLayout() {
  return (
    <Grid container spacing={3}>
      {/* 项1：宽屏（md及以上）显示在前，小屏（xs）显示在后 */}
      <Grid 
        item 
        xs={12} 
        md={6} 
        sx={{
          order: { xs: 2, md: 1 },
          background: '#f5f5f5',
          padding: 3
        }}
      >
        <Typography variant="h6">项1</Typography>
        <Typography>这里是项1的内容区域</Typography>
      </Grid>

      {/* 项2：宽屏显示在后，小屏显示在前 */}
      <Grid 
        item 
        xs={12} 
        md={6} 
        sx={{
          order: { xs: 1, md: 2 },
          background: '#e0e0e0',
          padding: 3
        }}
      >
        <Typography variant="h6">项2</Typography>
        <Typography>这里是项2的内容区域</Typography>
      </Grid>
    </Grid>
  );
}

export default ResponsiveLayout;

方法二：使用Box组件配合Flex布局 #

如果你更倾向于原生Flex布局，也可以用Box组件实现：

import { Box, Typography } from '@mui/material';

function ResponsiveLayout() {
  return (
    <Box sx={{ 
      display: 'flex',
      flexDirection: { xs: 'column', md: 'row' }, // 小屏垂直排列，宽屏水平排列
      gap: 3 
    }}>
      <Box 
        sx={{
          order: { xs: 2, md: 1 },
          flex: 1,
          background: '#f5f5f5',
          padding: 3
        }}
      >
        <Typography variant="h6">项1</Typography>
        <Typography>这里是项1的内容区域</Typography>
      </Box>

      <Box 
        sx={{
          order: { xs: 1, md: 2 },
          flex: 1,
          background: '#e0e0e0',
          padding: 3
        }}
      >
        <Typography variant="h6">项2</Typography>
        <Typography>这里是项2的内容区域</Typography>
      </Box>
    </Box>
  );
}

export default ResponsiveLayout;

核心原理说明 #

• MUI的断点（xs、sm、md等）对应不同屏幕尺寸：xs代表≤600px（移动端），md代表≥900px（宽屏）
• CSS的order属性控制Flex容器内元素的排列顺序，数值越小越靠前
• 通过在sx属性中为不同断点设置不同的order值，就能实现屏幕尺寸变化时自动切换元素顺序

内容的提问来源于stack exchange，提问作者Sandeep Thomas