Slick内のリストを、レスポンシブ時にブロック分けしたい

タイトルの付け方が微妙なのですが、やりたいことは以下です。

slickを利用し、スライドをしているものを、SP時（980px以下）で表現を変えたいのですが、実現するための
最適解がわかりません。

やりたい表現

PC時：.kv-boxが２個ずつ表示される（通常のslickスライド 2ブロックずつスライド仕様）
SP時：.kv-boxが２個ずつだが、その中身が縦積みに変更される（←ここがわからない）

□ □ ←こういうスライドを

□
□　←こういう形で１ブロックとしてスライドさせたいのです。

現状、実現できそうだと思ったのは、sp時にkv-boxを２個ずつdivでwrapし、slick側ではそれを1ブロックとしてスライドしてもらう。という発想でした。

以下ソースです。

html
1<section class="top-kv">
2<div class="kv-box">中身略</div>
3<div class="kv-box">中身略</div>
4<div class="kv-box">中身略</div>
5<div class="kv-box">中身略</div>
6</section>

js
1<script>
2$('.top-kv').slick({
3    autoplay:false,
4    autoplaySpeed:6000,
5    dots:true,
6    arrows: true,
7   slidesToShow:2,
8   slidesToScroll:2,
9   responsive: [
10     {
11       breakpoint: 980, // 399px以下のサイズに適用
12       settings: {
13       slidesToShow: 1,
14       },
15     },
16   ],
17});
18
19
20//980px以下になったら、２個ずつ要素をdivで囲む
21$(function(){
22    Allwidth = $(window).width();
23    if (Allwidth <= 980) {
24	do{
25		$(".slick-track").children('.kv-box:lt(2)').wrapAll('<div></div>')
26        slider.slick('setPosition')
27	}while($(".slick-track").children('.kv-box').length)
28}
29});
30