Как настроить Masonry JS?

Question

[Max]

Здравствуйте, подскажите как настроить плагин masonry пожалуйста.
Нужно что бы на экранах до 1200пх отображались три плитки в одном ряду, а больше уже пять.
Именно с выводом в 5 колонок возникают проблемы. Все начинает ездить.

<div class="masonry"> 
								<div class="col-md-4 col-sm-4 col-xs-6 item"><img src="img/productImg2.png" alt="alt">
								<i class="fa fa-heart-o"></i>
									<a href="#" class="masonryA">Описание работы в одну строку</a>
									<a href="#" class="massA">Владимир Пинчук</a>
									<span class="masonrySpan">Украина</span>
	 								<button class="addinCart">Добавить в корзину</button>
									<label for=""class="masLabel"> 990 грн</label>
								</div>
								<div class="col-md-4 col-sm-4 col-xs-6 item"><img src="img/productImg2.png" alt="alt">
								<i class="fa fa-heart-o"></i>
									<a href="#" class="masonryA">Описание работы в одну строку</a>
									<a href="#" class="massA">Владимир Пинчук</a>
									<span class="masonrySpan">Украина</span>
	 								<button class="addinCart">Добавить в корзину</button>
									<label for=""class="masLabel"> 990 грн</label>
								</div>
								<div class="col-md-4 col-sm-4 col-xs-6 item"><img src="img/productImg1.png" alt="alt">
								<i class="fa fa-heart-o"></i>
									<a href="#" class="masonryA">Описание работы в одну строку</a>
									<a href="#" class="massA">Владимир Пинчук</a>
									<span class="masonrySpan">Украина</span>
									<button class="addinCart">Добавить в корзину</button>
									<label for="" class="masLabel">990 грн</label>
								</div>
								<div class="col-md-4 col-sm-4 col-xs-6 item"><img src="img/productImg2.png" alt="alt">
								<i class="fa fa-heart-o"></i>
									<a href="#" class="masonryA">Описание работы в одну строку</a>
									<a href="#" class="massA">Владимир Пинчук</a>
									<span class="masonrySpan">Украина</span>
	 								<button class="addinCart">Добавить в корзину</button>
									<label for=""class="masLabel"> 990 грн</label>
								</div>
								<div class="col-md-4 col-sm-4 col-xs-6 item"><img src="img/productImg1.png" alt="alt">
								<i class="fa fa-heart-o"></i>
									<a href="#" class="masonryA">Описание работы в одну строку</a>
									<a href="#" class="massA">Владимир Пинчук</a>
									<span class="masonrySpan">Украина</span>
									<button class="addinCart">Добавить в корзину</button>
									<label for="" class="masLabel">990 грн</label>
								</div>
								<div class="col-md-4 col-sm-4 col-xs-6 item"><img src="img/productImg2.png" alt="alt">
								<i class="fa fa-heart-o"></i>
									<a href="#" class="masonryA">Описание работы в одну строку</a>
									<a href="#" class="massA">Владимир Пинчук</a>
									<span class="masonrySpan">Украина</span>
	 								<button class="addinCart">Добавить в корзину</button>
									<label for=""class="masLabel"> 990 грн</label>
								</div>
								<div class="col-md-4 col-sm-4 col-xs-6 item"><img src="img/productImg1.png" alt="alt">
								<i class="fa fa-heart-o"></i>
									<a href="#" class="masonryA">Описание работы в одну строку</a>
									<a href="#" class="massA">Владимир Пинчук</a>
									<span class="masonrySpan">Украина</span>
									<button class="addinCart">Добавить в корзину</button>
									<label for="" class="masLabel">990 грн</label>
								</div>
								<div class="col-md-4 col-sm-4 col-xs-6 item"><img src="img/productImg2.png" alt="alt">
								<i class="fa fa-heart-o"></i>
									<a href="#" class="masonryA">Описание работы в одну строку</a>
									<a href="#" class="massA">Владимир Пинчук</a>
									<span class="masonrySpan">Украина</span>
	 								<button class="addinCart">Добавить в корзину</button>
									<label for=""class="masLabel"> 990 грн</label>
								</div>
								<div class="col-md-4 col-sm-4 col-xs-6 item"><img src="img/productImg1.png" alt="alt">
								<i class="fa fa-heart-o"></i>
									<a href="#" class="masonryA">Описание работы в одну строку</a>
									<a href="#" class="massA">Владимир Пинчук</a>
									<span class="masonrySpan">Украина</span>
									<button class="addinCart">Добавить в корзину</button>
									<label for="" class="masLabel">990 грн</label>
								</div>
									 </div>

@media only screen and (min-width: 1200px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}
.masonry {
    margin: 1.5em 0;
    padding: 0;
    column-gap: 1.5em; /* Общее расстояние между колонками */
    font-size: .85em;
    -moz-column-gap: 1.5em; /* Расстояние между колонками для Firefox */
    -webkit-column-gap: 1.5em; /* Расстояние между колонками  для Safari, Chrome и iOS */
}

/* Элементы в виде плиток с содержанием */
.item {
    display: inline-block;
    /* background: #CE5050; */
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /* box-shadow: 2px 2px 4px 0 #ccc; */
}
/* Стили картинок, видое и фреймов внутри адаптивных плиток */
img, iframe {
max-width: 100%;
height: auto;
display: block;
}

/* Стили ссылок внутри плиток */
.item a {
text-decoration: none;
color: #359CC6;
}

var $container = $(".masonry-container");
		$container.imagesLoaded(function () {
			$container.masonry({
				columnWidth: ".item",
				itemSelector: ".item",
				isAnimated: true
		});
	  });
		$(".item").imagefill();
	
	});