Javascript 如何调整桌面的 CSS，但在平板电脑的另一个项目下方

所以我已经创建了一个网格布局，在桌面上，我希望按钮在同一行对齐，但是堆叠在搜索栏在一行，其余行在它下面的一行，左侧留出一些空间，然后对于移动设备，FilterButton堆叠在彼此的顶部.我有这么多不同的组合，但我不知道我错过了什么.到目前为止，我让它在桌面上看起来很正确.

以下是Sandbox : https://codesandbox.io/s/responsive-grid-u5uuud?file=/src/Responsive.jsx个

到目前为止，我有这样的 idea :

<Grid item lg={12} sm={12} xs={12} sx={{ mt: 2 }}>
            <Grid container spacing={2} height="100%">
              <Grid item lg={6} sm={6} xs={6} display="flex" alignItems="center" justifyContent="start">
                <Typography fontSize={"20px"}>Applications</Typography>
              </Grid>
              <Grid item lg={6} sm={6} xs={6} display="flex" alignItems="center" justifyContent="end">
                <Button sx={appStyle.newAppButton}>+ New Application</Button>
              </Grid>
            </Grid>
          </Grid>
          <Grid item lg={12} sm={12} xs={12} >
            <Grid container spacing={0} height="100%">
              <Grid item lg={3} sm={12} xs={12} display="flex" alignItems="center" justifyContent="start">
                <TextField
                  type="search"
                  variant="outlined"
                  margin="normal"
                  fullWidth
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <SearchIcon />
                      </InputAdornment>
                    ),
                  }}
                />
              </Grid>
              <Grid item lg={6} sm={0} xs={0} /> {/* empty column */}
              <Grid item lg={2} sm={9.9} xs={12} display="flex" alignItems="center" justifyContent="end">
                <FilterButton label="Product" options={productOptions} />
                <FilterButton label="Application Status" options={applicationStatusOptions} />
                <FilterButton label="Ticket Status" options={ticketStatusOptions} />
              </Grid>
              <Grid item lg={1} sm={1} xs={1} display="flex" alignItems="right" justifyContent="end">
                <Button style={{ fontSize: "14px", width: "150px", whiteSpace: "nowrap" }}>Clear All Filters</Button>
              </Grid>
            </Grid>
          </Grid>

Here's what it should look like for tablet:

以下是手机应该是什么样子的: