<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="row"> <div class="col-md-12"> <div class="float-right mt-3"> <a href="javascript:;" id="grid" class="active btn btn-primary">Grid View</a> <a href="javascript:;" id="list" class="btn btn-success">List View</a> </div> </div> </div> <div class="row" id='deals'> <div class="col-md-4"> <div class="contentwimg p-3 bg-light mt-4"> <div> <p class="store-t mb-2 text-dark mr-2 font-weight-bold">Musto Stornoway GORE TEX Boots, Dark</p> <p class="deals_desc mb-2 ">From everyday computing to watching videos and presentations, this widescreen monitor presents it all in crisp clarity.</p> <span class="del text-dark mr-2 font-weight-bold">269.00</span> <span class="red text-danger font-weight-bold">243.00</span> <p class="cashback mb-2 mt-2 text-success mr-2 font-weight-bold">32% Cashback</p> </div> <div> <button class="btn btn-primary btn-lg text-uppercase">buy now</button> </div> </div> </div> <div class="col-md-4"> <div class="contentwimg p-3 bg-light mt-4"> <div> <p class="store-t mb-2 text-dark mr-2 font-weight-bold">Musto Stornoway GORE TEX Boots, Dark</p> <p class="deals_desc mb-2 ">From everyday computing to watching videos and presentations, this widescreen monitor presents it all in crisp clarity.</p> <span class="del text-dark mr-2 font-weight-bold">269.00</span> <span class="red text-danger font-weight-bold">243.00</span> <p class="cashback mb-2 mt-2 text-success mr-2 font-weight-bold">32% Cashback</p> </div> <div> <button class="btn btn-primary btn-lg text-uppercase">buy now</button> </div> </div> </div> <div class="col-md-4"> <div class="contentwimg p-3 bg-light mt-4"> <div> <p class="store-t mb-2 text-dark mr-2 font-weight-bold">Musto Stornoway GORE TEX Boots, Dark</p> <p class="deals_desc mb-2 ">From everyday computing to watching videos and presentations, this widescreen monitor presents it all in crisp clarity.</p> <span class="del text-dark mr-2 font-weight-bold">269.00</span> <span class="red text-danger font-weight-bold">243.00</span> <p class="cashback mb-2 mt-2 text-success mr-2 font-weight-bold">32% Cashback</p> </div> <div> <button class="btn btn-primary btn-lg text-uppercase">buy now</button> </div> </div> </div> </div> </div> <script> $(document).ready(function () { $('#list').click(function(event){event.preventDefault();$('#deals .col-md-4').addClass('listing-group');}); $('#grid').click(function(event){event.preventDefault();$('#deals .col-md-4').removeClass('listing-group');}); $("#grid,#list").click(function(){ $("#grid,#list").toggleClass("active"); }); }); </script>

.listing-group { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .listing-group .contentwimg { display: flex; justify-content: space-between; align-items: center; } .listing-group .contentwimg div:first-child{ width: calc(100% - 300px); }