Force Div Down Below Another (With 3D Flip Effect) - html

Question

I've implemented a 3D flip effect in CSS to allow my div to have a front and back side (shows front by default, back on hover). The flip itself is working great, but there is another div at the end with a smaller height, and I can't seem to figure out how to push this div down past the one that flips. My goal is to have the flip div on a line, and the other image down below it instead of being covered up by the flip div.
And of course since we can't make this too easy, both the flip images and the image in the div below all have to be able to handle variable size images, they will never have set dimensions.
Here's the HTML:
<div class="images">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img src="http://www.placehold.it/350x450?text=front">
</div>
<div class="back">
<img src="http://www.placehold.it/350x450?text=back">
</div>
</div>
</div>
<br />
<div class="thumbnails columns-3" style=""><img src="http://www.placehold.it/350x150?text=image"></div>
</div>
And here's the CSS:
div.images {
float: left;
margin-bottom: 1em;
}
/* Flip3D */
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
/* width: 100%;
height: 100%;*/
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
Here's my fiddle: https://jsfiddle.net/8z2vbcrw/
Hopefully this all makes sense, but please ask me for clarification if not.

Answer 1

It can be done either by giving a height and width to your .flipper container or by just getting rid of absolute positioning on the front card...
https://jsfiddle.net/8z2vbcrw/
.front, .back {
backface-visibility: hidden;
top: 0;
left: 0;
}
.back {
position: absolute;
}
By doing this, the front card maintains the layout.