How to flip elements without to break Bootstrap grid system? - html

Question

I want to develop an pricing table using flip animation exactly like this example and I also use Bootstrap 3.3.6 to develop the entire website.
So, when I used the flip animation inside the Bootstrap grid system, it doesn't work anymore because the animation is using absolute positioning in order to make the animation work properly. Then, each pricing table overlap on each other on smaller windows.
The guilty CSS is this one, it comes from the link given above:
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
Finally, using the grid system like this doesn't work:
<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>
Does anyone know a way to avoid this?
Thank you,
David
EDIT
Here the fiddle as requested

Answer 1

You need to overwrite the width (and the height if you want)
body .flip-container, body .front, body .back {
width: 100%;
height: auto;
}
working example: https://jsfiddle.net/59wwkua3/
For IE you have to add extra classes like mentioned in https://davidwalsh.name/css-flip#ieflip
I tried to come far as possible with your example. I figured out you missed the flip-container class as well. Here is my last work on it. I filled out the back with navy-blue and hope you find out how to get the rest of the .back
https://jsfiddle.net/brr379Lp/