Html 引导倒装卡的正面和背面不是相互重叠的

我不熟悉HTML/CSS/Bootstrap，所以希望我的问题的解决方案对你们中的一位来说是显而易见的

我正在制作一张翻页卡，正面和背面都有一张彩色的桌子（正面和背面会显示不同的信息）

为了给这个表提供“轴标签”，我在左侧和彩色表条目下方添加了一个额外的列。我有这个表+轴标签的正面和背面的翻转卡。当卡片翻转时，正面+轴的部分标签在背面卡片的右侧可见。我怎样才能把卡片放在彼此的上面，这样当背面向上时，前面的部分就看不见了？（实际上也应该有轴标签，但不知怎么的，它在代码段中没有正确显示，所以我把它注释掉了。）

.table#risikomatrix{
宽度：90%；
身高：90%；
}
.表td{
边框顶部：0px实心#121416；
}
#左轴前{
背景色：白色；
右边框：3倍纯黑；
宽度：0%；
垂直对齐：中间对齐；
}
#左轴标签{
背景色：白色；
变换：旋转（-90度）translateY（-18px）translateX（-110px）；
宽度：0%；
身高：0%；
位置：绝对位置；
空白：nowrap；
字号：14pt；
}
#下十字轴{
边框顶部：3件纯黑；
}
#下_轴_标签{
背景色：白色；
转化：translateY（-12px）translateX（50%）；
宽度：50%；
身高：0%；
空白：nowrap；
字号：14pt；
}
.细胞{
宽度：33.33%；
位置：相对位置；
}
.cell：：之后{
内容：''；
显示：块；
利润率最高：100%；
}
.卡片{
背景色：白色；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
边框：1px实心#f1f1；
/*卡片的中心对齐*/
文本对齐：居中；
显示器：flex；
证明内容：中心；
}
.卡片#黄色{
背景颜色：金色；
}
.卡片#红色{
背景色：红色；
}
.卡#绿色{
背景颜色：绿色；
}
.翻卡片大{
背景色：白色；
宽度：40%；
身高：40%；
/*透视图：1000px；如果不想要3D效果，请删除此选项*/
}
/*需要使用该容器来定位正面和背面*/
.翻转卡大内孔{
背景色：白色；
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
转变：转变0.8s；
变换样式：保留-3d；
/*自对准：居中*/
}
/*在翻转框容器上移动鼠标时进行水平翻转*/
.翻转大卡片：悬停。翻转大卡片内部{
背景色：白色；
变换：旋转（-180度）；
}
/*定位前后侧*/
.大正面翻页卡{
背景色：白色；
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit背面可见性：隐藏；/*Safari*/
背面可见性：隐藏；
}
.翻卡片大背{
背景色：白色；
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit背面可见性：隐藏；/*Safari*/
背面可见性：隐藏；
}
/*设置正面样式（如果缺少图像，则后退）*/
.大正面翻页卡{
背景色：白色；
颜色：rgb（255、255、255）；
文本对齐：中间对齐；
}
/*背面样式*/
.翻卡片大背{
背景色：白色；
颜色：rgb（255、255、255）；
变换：旋转（180度）；
}