Переместить блок в мобильной версии на JQuery

Бывают ситуации, когда на сайте есть блок, который на десктопной версии расположен в одной очередности, но в мобильной версии его очередность нужно нарушить. Не всегда есть возможность переверстать под flex и задать это стилями. Разберем вариант на js вместе с jquery.

Допустим есть список:

<ul>
<li>text</li>
<li id="cut" style="color:red">Это нужно перенести в под обозначенные тег в мобильной версии</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li id="insert" style="color:green">Переместить под этот тег</li>
<li>text</li>
</ul>

Код перемещающий нужный блок в зависимости от размера экрана у устройства:

$(window).on('load resize', function(){
      if ($(window).width() <= 768) {
        $('#cut').insertAfter('#insert');
      }
  });

load resize - при загрузке или изменении размера экрана

width() <= 768 - размер экрана при котором это срабатывает

insertAfter() - тег id="cut" вставляем после id="insert"

Данные код сработает только на мобильной версии сайта. На версии для десктопа пользователь этого не увидит.