Css 如何使用react和typescript将ButtonWrapper div包装在ContentWrapper div中，使其在纵向模式下位于Card div的下方？

我有一个div ContentWrapper div，它包含Card div和ButtonWrapper div

就像下面,

function Parent() {
    return (
        <Wrapper>
            <ContentWrapper>
                <Card>
                    <Content/>
                </Card>
                <ButtonsWrapper/>
            </ContentWrapper>
        </Wrapper>
     );
 }


const Wrapper = styled.div`
    flex: 1;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1;
`;

const ContentWrapper = styled.div`
    width: ${dialogWidth};
    height: ${dialogHeight};
    position: relative;
    z-index: 3;
`;

const ButtonsWrapper = styled.div`
    position: absolute;
    top: 0;
    right: -112px;
    width: 80px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
`;

const Card = styled.div`
    width: ${dialogWidth};
    height: ${dialogHeight};
    position: relative;
    z-index: 1;
`;

函数父函数（）{
返回(
);
}
const Wrapper=styled.div`
弹性：1；
身高：100%；
宽度：100%；
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
溢出：隐藏；
z指数：1；
`;
const ContentWrapper=styled.div`
宽度：${dialogWidth}；
高度：${dialogHeight}；
位置：相对位置；
z指数：3；
`;
const buttonswapper=styled.div`
位置：绝对位置；
排名：0；
右：-112px；
宽度：80px；
身高：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
z指数：2；
`;
const Card=styled.div`
宽度：${dialogWidth}；
高度：${dialogHeight}；
位置：相对位置；
z指数：1；
`;

这里的dialogWidth是1088px，dialogHeight是472px

上述功能在桌面上运行良好，但现在希望在ipad设备上支持同样的功能。因此，在横向模式下，ButtonsWrapper div被剪切，在屏幕上看不到。此外，在纵向模式下，屏幕上看不到ButtonsWrapper div

所以在横向模式下，我希望ButtonsWrapper div位于Card div的旁边，在纵向模式下，它应该位于Card div的下面

为了确定设备是否处于纵向模式，我将变量isPortrait mode设置为true

但我不能这样做。我曾尝试在ContentWrapper div上使用flex-direction:row，但它对ButtonsWrapper div没有影响

有人能帮我吗。谢谢