JSFiddle - React, Tailwind, and code Playground

by mynameisdonald

HTML

<div class="navigation">
      <ul class="collections__list">
        <li class="list__item"><a href="">Thing</a></li>
        <li class="list__item"><a href="">Thing2</a></li>
        <li class="list__item"><a href="">Thing3</a></li>
        <li class="list__item list__item--is-selected"><a href="">Thing4</a></li>
        <li class="list__item"><a href="">Thing5</a></li>
      </ul>
    </div>

JavaScript

$(window).resize(function() {
  WorkShitOut();
});
WorkShitOut();
function WorkShitOut(){
    if ($(window).width() < 700) {
        if ($('.collections__list').find('.list__item--is-selected').length > 1) {
            $('.list__item--is-selected').first().remove();
        }
          $('.collections__list')
              .find('.list__item--is-selected')
              .hide()
              .clone()
              .show()
              .prependTo('.collections__list');
    } else if ($(window).width() > 700) {
        $('.list__item--is-selected').show();
        $('.list__item--is-selected:first-child').remove();
        console.log('bigger');
    }
}