JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class="container">
    <div class="grid-container row">
        <!-- grid items -->
    </div>
</div>
<template id="tmpl_grid_item">
    <div class="grid-item-wrapper col-xs-3">
        <div class="grid-item">
            <div class="item-picture">
                <img src="http://lorempixel.com/350/200/food/" style="width: 100%;" />
            </div>
            <div class="item-desc">
                Lorem Ipsum
            </div>
        </div>
    </div>
</template>

CSS

.container {
    background-color: #2B3643;
}
.container * {
    box-sizing: content-box;
}
.grid-container {
    padding-top: 30px;
    padding-bottom: 0px;
    display: flex;
    flex-wrap: wrap;
    margin: 0px auto;
}
.grid-item-wrapper {
    width: 200px;
    margin-bottom: 15px;
}
.grid-item {
    margin-bottom: 15px;
}

.grid-item > .item-desc {
    padding: 8px;
    background-color: #333333;
    color: #CFCFCF;
}

body {
    padding-top: 60px;
}

@media (min-width: 762px) and (max-width: 991px) {
    .grid-item-wrapper:nth-child(3n+1) {
        margin-left: 15px;
    }
}
@media (min-width: 992px) {
    .grid-item-wrapper:nth-child(4n+1) {
        margin-left: 9px;
    }    
}
@media (min-width: 1200px) {
    .grid-item-wrapper:nth-child(4n+1) {
        margin-left: 109px;
    }  
}

JavaScript

$(document).ready(function() {
    function fillGrid() {
        var $gridContainer = $('.grid-container');
        var htmlGridItem = $('#tmpl_grid_item').html();
        $gridContainer.empty();
        for (var i = 0; i < 20; i++) {
            var $gridItem = $(htmlGridItem);
            $gridContainer.append($gridItem);
        }
    };
    fillGrid();
});