Html 如何在引导中使两个面板主体（可能大小不同）翻转？

我一直在尝试在同一个

面板

内制作两个

面板主体

水平翻转。两个

面板主体

s应该一个在另一个之上，每当我经过面板时，它们应该旋转180度

目前正在发生的事情是，两个

面板主体

依次放在面板内；因此，即使其中一个

面板主体

s被隐藏，它的空间也在那里

这是我的HTML/Twig模板：

<div class="row" data-checks-url="/checks" id="uptime-checks-panel">

    {% for check in checks %}

    <div class="col-xs-12 col-md-6 col-lg-4" id="{{ 'check_' ~ check.id }}">

        <div class="panel text-center flip">
            <div class="panel-body panel-front">
                <div class="panel-heading">
                    <h3 class="panel-title"> {{ check.name }}</h3>
                </div>

                <i {% if check.status=='up' %} class="fa fa-thumbs-up fa-5x thumbs-up" {% else %} class="fa fa-thumbs-down fa-5x thumbs-down" {% endif %} id="{{ check.id ~ '_status'}}">   
                    </i>

                <div class="panel-footer">
                    <a href="{{ check.hostname | external_link }}"> {{ check.hostname }}</a>
                </div>
            </div>

            <div class="panel-body panel-back">
                <ul class="list-group">
                    <li class="list-group-item">last response in {{ check.lastresponsetime }} millisecs </li>
                    <li class="list-group-item">last error {{ check.lasterrortime | pretty_timestamp }} ago</li>
                </ul>
            </div>

        </div>

    </div>

    {% endfor %}

</div>

如果将

position:absolute

添加到

.panel front

和

.panel back

中，结果会更糟，即所有网格都没有响应。。。当然，我不想设置

面板的大小，因为我需要一个响应网格

这是视觉效果：


在检查面板之前：



检查面板后：


注释：

过渡工作很好，除了两个机构不是一个高于另一个（正如我上面所说）

这两具尸体可能大小不同

我不想设置面板的大小，因为我需要一个响应网格

我想要达到的效果基本上与中最左边和最上面的正方形相同

我通过修改选择器
.flip
和
.flip>.panel back
来修复问题（至少现在两个实体看起来是一个在另一个之上）：

.flip {
    position: relative;
}

.flip > .panel-back {
    position: absolute;
    top: 0;
    min-width: 100%;
    min-height: 100%;

    background-color: green;
    transform: perspective(800px) rotateY(180deg);
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
}

我通过修改选择器
.flip
和
.flip>.panel back
来修复问题（至少现在两个实体看起来是一个在另一个之上）：

.flip {
    position: relative;
}

.flip > .panel-back {
    position: absolute;
    top: 0;
    min-width: 100%;
    min-height: 100%;

    background-color: green;
    transform: perspective(800px) rotateY(180deg);
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
}