Обнаружение, количество элементов в строке в соответствии с разрешением

Question

У меня есть этот пример:

ссылка

$(window).on('resize', function() {
  var win = $(this); //this = window

  if (win.width() >= 1280) {
    var prodPerLine = "3"
  }

  if (win.width() >= 768) {
    var prodPerLine = "2"
  }

  if (win.width() >= 420) {
    var prodPerLine = "1"
  }
});

ul {
  list-style-type: none;
}

ul li {
  width: 33%;
  float: left;
  border: 1px solid #d9d9d9;
}

@media only screen and (max-width: 768px) {
  ul li {
    width: 49%;
    border: 1px solid red;
  }
}

@media only screen and (max-width: 420px) {
  ul li {
    width: 100%;
    border: 1px solid blue;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

Я хочу сохранить в переменной javascript количество элементов в строке в зависимости от разрешения.

Как можноЯ делаю это? Нужна ли структура решения типа переключателя?

Я пытался привести пример, но он не завершен, потому что я не понимаю, какой алгоритм у нас должен быть в спине, чтобы определить количество продуктов в ряду, в зависимости отна разрешение

Заранее спасибо!