Using rows: 2 and on responsive row: 1 doesn't work

I need to have 1 row when going responsive < 680 px and show 2 items per row. Somehow that doesn’t work.

I have made a JSFiddle; https://jsfiddle.net/b5bqk68j/925/

(refresh when on < 680 px wide)

My Slick call;

$('.slider-4st').slick({
	dots: false,
	arrows: true,
	nextArrow: '<div class="next"><i>&raquo;</i></div>',
	prevArrow: '<div class="prev"><i>&laquo;</i></div>',
	infinite: false,
	speed: 300,
	slidesPerRow: 4,
	rows: 2,
	adaptiveHeight: true,
	//slidesToShow: 4,
	//slidesToScroll: 4,
	responsive: [
		{
			breakpoint: 1024,
			settings: {
				slidesPerRow: 3
			}
		},
		{
			breakpoint: 680,
			settings: {
				rows: 1,
				slidesPerRow: 2
			}
		},
		{
			breakpoint: 480,
			settings: {
				rows: 1,
				slidesPerRow: 1
			}
		}
	]
});

[x35a]

Try to use slick 1.8.1 and slick.js file. Its important cause slick.min.js is broken in 1.8.1

[jeffmagill]

I just want to confirm that @rosivanov 's suggestion to use the un-minified 1.8.1 resolved the issue for me. Thanks.