I have the following component:

    <Stack direction="row" spacing={2}>
      <Skeleton variant="rounded" animation="wave" sx={{ width: 1 }} />
      <Loading
        text="Loading..."
        sx={{ position: 'relative', background: 'none', color: 'grey' }}
        recommendedSolutions={
          <LoadingBtn
            onClick={refetch}
            variant="outlined"
            loadingIndicator="Refetching data..."
            loading={loading}
          >
            Try again
          </LoadingBtn>
        }
      />
    </Stack>

I want to be able to change the direction prop of the Stack component based on the screen breakpoint. The question is:

I can use the grid component to solve this problem as follows:

    <Grid container>
      <Grid item sx={{ display: { xs: 'none', md: 'block' } }}>
        <Stack direction="row" spacing={2}>
          <Skeleton variant="rounded" animation="wave" sx={{ width: 1 }} />
          <Loading
            text="Loading..."
            sx={{ position: 'relative', background: 'none', color: 'grey' }}
            recommendedSolutions={
              <LoadingBtn
                onClick={refetch}
                variant="outlined"
                loadingIndicator="Refetching data..."
                loading={loading}
              >
                Try again
              </LoadingBtn>
            }
          />
        </Stack>
      </Grid>
      <Grid item sx={{ display: { xs: 'block', md: 'none' } }}>
        <Stack direction="vertical" spacing={2}>
          <Skeleton variant="rounded" animation="wave" sx={{ width: 1 }} />
          <Loading
            text="Loading..."
            sx={{ position: 'relative', background: 'none', color: 'grey' }}
            recommendedSolutions={
              <LoadingBtn
                onClick={refetch}
                variant="outlined"
                loadingIndicator="Refetching data..."
                loading={loading}
              >
                Try again
              </LoadingBtn>
            }
          />
        </Stack>
      </Grid>
    </Grid>

but this makes me repeat similar code, is there a way I can do it within the direction prop of the Stack component itself? it's a tough task to write that much code