how to move selected li to top on small screens?

gistfile1.txt

I've got some navigation - 

    <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>
    
what I want is for when it's on a screen with a width narrower than 600px to have the list__iten--is-selected to be put to the top of the ul

Currently I've got (roughly) this 

if ($(window).width() < 700) {
  // collections put whatever collection is selected at top of list on mobile
  $('.collections__list').find('.list__item--is-selected').prependTo('.collections__list');
}

// collections put whatever collection is selected at top of list on mobile
$(window).resize(function() {
  if ($(window).width() < 700) {
    // collections put whatever collection is selected at top of list on mobile
    $('.collections__list').find('.list__item--is-selected').prependTo('.collections__list');
  }
  else {
  }
});

but I want to 'destroy' and put that li back to where it was if the user goes from small viewport to large viewport if they resize.


Any ideas?