Move block in mobile version with jQuery

There are situations when there is a block on the site, which is located in the same order on the desktop version, but in the mobile version its order needs to be broken. It is not always possible to convert to flex and set it with styles. Let's analyze the js option along with jquery.

Let's say we have a list:

<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>

The code that moves the desired block depending on the screen size of the device:

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

load resize - when loading or changing the screen size

width() < 768 - screen size at which this works

insertAfter() - insert tag id="cut" after id="insert"

This code will only work on the mobile version of the site. On the desktop version, the user will not see this.