JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row featured_products list-group">
    <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
        <div class="padding">
            <div class="border">
                <div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x272/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 1</span></span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
        <div class="padding">
            <div class="border">
                <div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x270/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 2</span></span> </a>
                </div>
            </div>
        </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
        <div class="padding">
            <div class="border">
                <div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x272/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 3</span></span> </a>
                </div>
            </div>
        </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
        <div class="padding">
            <div class="border">
                <div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x235/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 4</span></span> </a>
                </div>
            </div>
        </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
        <div class="padding">
            <div class="border">
                <div class="innerpadding product-thumbnail"><a href="#"><img...

CSS

.featured_product {
    padding-left:10px;
    padding-right:10px;
    margin-bottom:15px;
}
.featured_products div.padding {
    padding:5px 10px;
}
.featured_products div.padding div.border {
    border:1px solid #EAEAEA;
}
.featured_products div.padding div.border div.innerpadding {
    padding:5px;
    text-align:center;
    width:100%;
}
.featured_products div.padding div.border div.innerpadding img {
    max-height:292px;
    display:inline-block;
}
span.featured_product_title {
    position: absolute;
    bottom:6px;
    left: 0;
    width: 100%;
    background-color:RGBa(255, 255, 255, 0.6);
    vertical-align:center;
    line-height:50px;
    height:50px;
    color:#46436f;
    font-weight:bold;
    font-size:1.3em;
}

@media (min-width: 768px) {
    .featured_products .item:nth-child(2n+1) {
      clear: both;
    }
}

@media (min-width: 992px) {
    .featured_products .item:nth-child(2n+1) {
      clear: none;
    }
    .featured_products .item:nth-child(3n+1) {
      clear: both;
    }
}

@media (min-width: 1200px) {
    .featured_products .item:nth-child(3n+1) {
      clear: none;
    }
    .featured_products .item:nth-child(4n+1) {
      clear: both;
    }
}