内容在媒体查询中占有一定位置

Question

我有一些卡，如果用户将鼠标悬停在卡上，它将旋转180Deg并显示价格和预订按钮，但是在移动设备上，我想在卡下方添加价格和按钮，但是价格和按钮在媒体查询中有一定位置，而没有媒体查询它工作正常，我得到了想要的结果。

这是媒体查询的外观

这是父元素，它位于正确的位置

但是这里

这是问题所在，如果位置是相对位置，那么为什么它位于其父元素上方。

没有媒体查询，它可以正常工作。 由于代码太长，因此无法将其全部粘贴到此处，因为我已将其全部划分为不同的文件。因此，请告诉我您是否需要任何代码。

编辑

@include respond(tabs-portrait) {
        height: auto;                 // This is for .card
        background-color: $color-white;    // This is for .card
        border-radius: 3px;               // This is for .card

        &__side {
           border-radius: 3px;
           position: relative;
           height: auto;
           box-shadow: none;

            &--back {
                height: auto;
                transform: rotateY(0deg);

            }
        }


        &__side--back {
            clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
        }


  &__back-content {
            width: 90%;
            position: relative;
            padding: 20rem 0 10rem 0;
            height: 1rem;

        }
    }