JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<script src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">
  <div class="article-list">
    <div class="row">
      <div class="col-4">
        <div class="article">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, expedita.
        </div>
      </div>
      <div class="col-4">
        <div class="article">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, expedita.
        </div>
      </div>
      <div class="col-4">
        <div class="article">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, expedita.
        </div>
      </div>
      <div class="col-4">
        <div class="article">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, expedita.
        </div>
      </div>
      <div class="col-4">
        <div class="article">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, expedita.
        </div>
      </div>
      <div class="col-4">
        <div class="article">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, expedita.
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

.article-list {
  .article {
    margin-bottom: 25px;
    border: 1px solid #111;
    padding: 20px;
  }
}

JavaScript

$(window).resize(handleResize)

function handleResize() {
  const target = $('.article-list .row')
  
  if ( $(window).width() <= 800 ) {
    target.slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false
    })
  } else {
    target.slick('unslick')
  }
}