Unslick responsively

I have a slider with four elements, at a screen size greater than a certain breakpoint, I’d like to disable slick and use CSS to render them as a 2x2 block grid. Is there a way to do this, or can it be added so you can have something like

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        unslick: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

[jmarceli]

For me overwriting core file as @ashussen supposed was not an option. The only working solution is writing custom “reslicking” function:

  $slick_slider = $('.slider');
  settings = {
    // some settings
  }
  $slick_slider.slick(settings);

  // reslick only if it's not slick()
  $(window).on('resize', function() {
    if ($(window).width() < 768) {
      if ($slick_slider.hasClass('slick-initialized')) {
        $slick_slider.slick('unslick');
      }
      return
    }

    if (!$slick_slider.hasClass('slick-initialized')) {
      return $slick_slider.slick(settings);
    }
  });

[cibgraphics]

I disagree @kenwheeler. A usecase could be that a slider could be working on an iPad portrait and the user turns ipad to landscape, and then back to portrait. If the breakpoint was between those two sizes the slider would no longer be functioning when it should be.