当屏幕尺寸改变时，改变组件的结构

在我网站的页面上有一个组件（DisplaySelectedFile）。它有一个按钮（SelectFileButton）和一个TableHead。TableHead里面的所有组件（总共有五个）都位于一行中（这在代码中可以清楚地看到）。

export default function DisplaySelectedFile() {
    // some code 
    return (
      <div>
        <SelectFileButton  />
  
        <div style={{margin: '0 auto', width: '670px', display: 'grid'}}>
            {showCard && (
              <TableHead sx={styles.CommonStyle}>
                <TableRow >
                  
                    <TableCell sx={styles.CellStyleFileName}>
                      {fileName}
                    </TableCell>
      
                    
                    <TableCell sx={styles.CellStyleButtonAndCross}>
                      <ConvertFileButton></ConvertFileButton>
                    </TableCell>

                    <TableCell sx={styles.CellStyleButtonAndCross}>
                      <CloseIcon  onClick={handleCloseCard} />
                    </TableCell>

                </TableRow>
              </TableHead>
            )}
        </div>
      </div>
    );
  }

问题是TableHead组件相当长（在代码示例中，我没有反映它实际包含的所有内容。对我来说，最主要的是要理解这个方法）。如果屏幕尺寸开始变化（在一个特定的情况下，我缩小了浏览器窗口），那么整个组件（TableHead）在屏幕上就不可见了。 我想这样做：如果屏幕尺寸小于600px，那么这个组件就分两行显示（例如，fileName和CloseIcon在上面，其他都在下面）。

在这个网站convertio.co/txt-gif/，也组织了一个类似的方法。如果你选择了一个文件，它将被显示在一行中，当用户开始缩小屏幕时，所选的文件将被显示在两行中