Перемістити блок у мобільній версії на 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"

Дані код спрацює лише на мобільній версії сайту. На версії для робочого столу користувач цього не побачить.