<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="grid-flip-area"> <div class="gird-flip"> <div> <img class="bg-image img-fluid" src="https://triangle.pushsvr.com/themes/triangle/content-image/1-general-service.png" alt="services image"> </div> <div class="gird-flip__content"> <p> placeholder text commonly used in graphic design, publishing, and web development to fill empty spaces in a layout that does not yet have content. </p> <p> placeholder text commonly used in graphic design, publishing, and web development to fill empty spaces in a layout that does not yet have content. </p> <p> placeholder text commonly used in graphic design, publishing, and web development to fill empty spaces in a layout that does not yet have content. </p> <p> placeholder text commonly used in graphic design, publishing, and web development to fill empty spaces in a layout that does not yet have content. </p> </div> </div> <div class="gird-flip"> <div> <img class="bg-image img-fluid" src="https://triangle.pushsvr.com/themes/triangle/content-image/2-race-service.png" alt="services image"> </div> <div class="gird-flip__content"> <p> placeholder text commonly used in graphic design, publishing, and web development to fill empty spaces in a layout that does not yet have content. </p> <p> placeholder text commonly used in graphic design, publishing, and web development to fill empty spaces in a layout that does not yet have content. </p> </div> </div> <div class="gird-flip"> <div> <img class="bg-image img-fluid" src="https://triangle.pushsvr.com/themes/triangle/content-image/3-full-service.png" alt="services image"> </div> <div class="gird-flip__content"> <p> placeholder text commonly used in graphic design, publishing, and web development to fill empty spaces in a layout that does not yet have content. </p> <p> placeholder text commonly used in graphic design, publishing, and web development to fill empty spaces in a layout that does not yet have content. </p> <p> placeholder text commonly used in graphic design, publishing, and web development to fill empty spaces in a layout that does not yet have content. </p> </div> </div> </div> </div>

.grid-flip-area{ display: flex; flex-direction: column; gap: 10px; } @media(min-width:991px){ .grid-flip-area{ gap: 0px; } } .gird-flip{ display: flex; flex-direction: column; } @media(min-width:991px){ .gird-flip{ flex-direction: row; } } .grid-flip-area .gird-flip:nth-child(even) { flex-direction: column; } @media(min-width:991px){ .grid-flip-area .gird-flip:nth-child(even) { flex-direction: row-reverse; } } .gird-flip__content{ padding: 20px 0px; display: flex; flex-direction: column; justify-content: center; } @media(min-width:991px){ .gird-flip__content{ padding-left:50px; padding-top:30px; padding-bottom:30px; } .grid-flip-area .gird-flip:nth-child(even) .gird-flip__content{ padding-right:50px; padding-left:0px; } } .gird-flip>div{ width:100%; } @media(min-width:991px){ .gird-flip>div{ width:50%; } } .gird-flip .bg-image{ height: 100%; object-fit: cover; }