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.

1115
0

Comments

wlad2.ru

Чтобы убрать ошибку Uncaught TypeError: $ is not a function
правильный код вот

$(window).on('load resize', function(){
if ($(window).width() < 768) {
$('#cut_col-sm-12').insertAfter('#insert_cut_col-sm-12');
}
});
2
Name
E-mail
Rating
Review

Other articles from the category

Code highlighting on the site using Js and Css

When describing minimal codes that have a syntax similar to C++, it may be necessary to have minimal highlighting on the site for better readability. I will give the easiest way to highlight, which I took from habrahabr. Consider, connect, describe ...