How to make card resposive - html

Question

I'm using boostrap, and I'm making a flipping animation card inside a row (col-lg-12), the problem is that when I resize the screen the card doesn't act "responsive"
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
text-align: center;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card {
width: 270px;
height: 178px;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
}
.flip .card .front {
position: absolute;
width: 270px;
z-index: 1;
}
.flip .card .img {
position: relaitve;
width: 270px;
height: 178px;
z-index: 1;
border: 2px solid #000;
}
.flip .card .back {
padding-top: 10%;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.inner {
margin: 0px !important;
}
<div id="porosity" class="card">
<div class="face front">
<div class="inner">
<img src="http://placehold.it/100x100" class="img-responsive center-block" alt="">
<p>Porosity</p>
</div>
</div>
<div class="face back">
<div class="inner text-center">
<p>Permeable to fluids, permeable to outside influences.</p>
</div>
</div>
</div>
Full code: https://codepen.io/elunap/pen/rYJEVW
What I'm doing wrong?

Answer 1

If you mean that when you resize screen the flipping card stay at the left while the others stay at center, if you want to make the flipping card stay at center like the others, you have to add margin: auto as follow:
.flip .card {
/* New property added */
margin: auto
}
check the updated CodePen, hope this what you want.