JSFiddle - React, Tailwind, and code Playground

by vandanasrivastava

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="cat-area">
  <div id="cat-container">
    <img class="box" src="http://via.placeholder.com/200x200">
    <img class="box" src="http://via.placeholder.com/200x200">
    <img class="box" src="http://via.placeholder.com/200x200">
    <img class="box" src="http://via.placeholder.com/200x200">
  </div>
</div>

CSS

#cat-area {
  background-color: gold;
  padding: 10px;
}
#cat-container {
  background-color: slategray;
  padding: 5px;
}

JavaScript

$(function() {
  var resizeTimer;
  var initialSize = $(window).width();
  $(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      var delayedSize = $(window).width();
      // if we resize the page but we don't cross the 650 threshold, do nothing
      if ((initialSize > 769 && delayedSize > 769) || (initialSize < 769 && delayedSize < 769)) {
      console.log("inside if statement");
        return
      }
      // else if we resize the page and cross the 650 threshold, do something
      else {
        if (delayedSize > 769) {
          $('#cat-container').unwrap('#wrapper');
        } else if (delayedSize <= 769) {
          $('#cat-container').wrap('<div id="wrapper"></div>');
        }
      }

      initialSize = delayedSize;
    }, 250);
  });
});