Bootstrap 4

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<div id="app">
  <div class="row">
    <div class="col tile" v-for="item in itemsWithBanners">
      {{ item.type }}
    </div>
  </div>
</div>

CSS

.row {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}
.tile {
  border: solid 1px #ccc;
  margin: 5px;
  height: 100px;
  min-width: 100px;
  width: 30%;
}

JavaScript

new Vue({
	el: '#app',
  data() {
  	return {
    	items: _.times(20, i => ({type: 'offer'})),
    };
  },
  computed: {
  	itemsWithBanners() {
    	let result = [];
      this.items.forEach((item, idx) => {
      	if (idx && idx % 5 === 0) {
        	result.push({type: 'banner'});
        }
        result.push(item);
      });
      return result;
    },
  },
})