html - 如何在不破坏Bootstrap网格系统的情况下翻转元素？

我想开发一个价格表使用翻转动画正是这样example，我也使用Bootstrap 3.3.6开发整个网站。
所以，当我在引导网格系统中使用翻转动画时，它不再工作，因为动画是使用绝对定位来使动画正常工作的。然后，每个定价表在较小的窗口上相互重叠。
有罪的CSS就是这个，它来自上面给出的链接：

.front, .back {
   backface-visibility: hidden;
   position: absolute;
   top: 0;
   left: 0;
}

最后，像这样使用网格系统是行不通的：

<div class="row">
    <div class="col-sm-2 col-md-2">
    // pricing table #1
    </div>
    <div class="col-sm-2 col-md-2">
    // pricing table #2
    </div>
    ... until I reach 12 as total.
</div>

有人知道如何避免这种情况吗？
谢谢您，
大卫
编辑
这里的fiddle按要求

最佳答案

您需要覆盖宽度（如果需要，还需要覆盖高度）

body .flip-container, body .front, body .back {
  width: 100%;
  height: auto;
}

工作示例：https://jsfiddle.net/59wwkua3/
对于IE，您必须添加额外的类，如https://davidwalsh.name/css-flip#ieflip
我尽量以你为榜样。我发现你也错过了那节课。这是我最后一份工作。我用海军蓝填了背面，希望你能找到剩下的。背面
https://jsfiddle.net/brr379Lp/