material-ui - reactjs material ui - 换行而不是水平滚动

Question

我有这样的桌子，用materialui和reactjs在桌面制作

当我在手机上看到同样的东西时，我会这样看

代码是

<Paper>
  <Table aria-label="simple table">
    <TableBody>
      <TableRow>
        <TableCell align="left">COL1</TableCell>
        <TableCell align="center">COL2</TableCell>
        <TableCell style={{width:'50%' }} colSpan={3} align="center">COL3</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</Paper>

我希望该列不要出现在纸上，而是换到下一行。

这个怎么做

标签： material-ui