How to make a flipbox responsive using html in column block

Question

I'm using Wordpress (Blocksy theme) and have created a three column flipbox that works on desktop, but not on mobile. Two things happen with this code. One I was able to fix, but wondered why it happened (the flip card overlapped other existing elements on the page.) I needed to add 3 spacers and then things fit.

The other issue (which I don't know how to fix) is that on mobile, the flip cards overlap each other instead of stacking, so that they are behind one another. I would like each box to be on its own line when viewed on mobile.

My initial idea was to use the column block with html - each flipcard has its own graphic - so each of the 3 columns has html code. (I tried to make my own columns and rows and put all the html in one column block, but then only one of the flip card images showed on desktop, instead of seeing the 3 images side by side. And, of course, it didn't work on mobile.

How do I make these flip cards responsive? And, separately, is there a way to make the card flip back on touch for mobile? (I noticed it will flip back if I touch above the card, but not on the card.). Thanks

Below is the code (with the specific images and text removed): (For what it's worth, I know the CSS code is redundant, but when I tried to combine classes, I lost some of the styling. For example, when I combined .thefront-left-flipcard. thefront-center-flipcard. and thefront-right-flipcard for all the styles except the background image, the front of the card lost almost all of its width, among other things.)

Column block with 3 columns across

Column box 1:

<div class="maincontainer">

    <div class="thecard">

        <div class="thefront-left-flipcard">left title</div>

            <div class="theback">
                <ul>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
               </ul>
        </div>
    </div>
</div>

Column box 2:

<div class="maincontainer">

    <div class="thecard">

        <div class="thefront-center-flipcard">center title</div>

            <div class="theback">
                <ul>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
               </ul>
        </div>
    </div>
</div>

Column box 3:

<div class="maincontainer">

    <div class="thecard">

        <div class="thefront-right-flipcard">right title</div>

            <div class="theback">
                <ul>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
                    <li>data</li>
               </ul>
        </div>
    </div>
</div>
  




/*flipcard*/

/* THE MAINCONTAINER HOLDS EVERYTHING */
.maincontainer{
    position: absolute;
    height: 270px;
    width: 315px;
}
* THE CARD HOLDS THE FRONT AND BACK FACES */
.thecard{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transform-style: preserve-3d;
    transition: all 2s ease;
}


/* THE PSUEDO CLASS CONTROLS THE FLIP ON MOUSEOVER AND MOUSEOUT */
.thecard:hover {
    transform: rotateY(180deg);
}

/* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */
.thefront-left-flipcard{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    background-color: #6cbe45;
    background-image: url(https://..left.png);
    background-repeat:no-repeat;
    background-position: center;
    color: #6cbe45;
    font-size: 2.5em;
}

.thefront-center-flipcard{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    background-color: #6cbe45;
    background-image: url(https://..center.png);
    background-repeat:no-repeat;
    background-position: center;
    color: #6cbe45;
    font-size: 2.5em;
}

.thefront-right-flipcard{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    background-color: #6cbe45;
    background-image: url(https://..right.png);
    background-repeat:no-repeat;
    background-position: center;
    color: #6cbe45;
    font-size: 2.5em;
}

/* THE BACK FACE OF THE CARD, WHICH SHOWS ON MOUSEOVER */

.theback{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    background: #07486d;
    color: #e4c548;
    text-align: left;
    transform: rotateY(180deg);
}

Answer 1

It's very simple. Just loock at this example below:

.ea-flip-card-item {
    background-color: transparent;
    max-width: 300px;
    height: 300px;
    width: 100%;
    perspective: 1000px;
}
.ea-flip-card-item .ea-flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.ea-flip-card-item:hover .ea-flip-card-inner {
    transform: rotateY(180deg);
}
.ea-flip-card-item .front, .ea-flip-card-item .back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.ea-flip-card-item .front {
    background-color: #ffa500;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ea-flip-card-item .back {
    background-color: #ffffff;
    color: black;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

<div class="ea-flip-card-item">
            <div class="ea-flip-card-inner">
                <div class="front">
                    <div class="ua-flip-card-content text-center position-absolute d-flex align-items-center justify-content-center flex-wrap flex-column">
                            <h3>
                                I am from Front
                            </h3>
                            <p>
                              add description here
                            </p>
                    </div>
                </div>

                <div class="back">
                    <div class="ua-flip-card-content text-center position-absolute d-flex align-items-center justify-content-center flex-wrap flex-column">
                    <h1>
                                I am from Back</h1>
                                <p>Cool</p>
                    </div>
                </div>
            </div>
        </div>