Изменить div order to suite отзыв viewport

Question

Im используя сценарий ниже, чтобы изменить порядок двух divs - html моего документа имеет div-класс «imagepanel ip-middle», предшествующий классу div «bgimagescale image2». При просмотре в области просмотра размером меньше 768 пикселей - я хочу, чтобы divs были отменены. В приведенном ниже сценарии не разворачиваются div на загрузке страницы. Только при изменении размера - как я полагаю, скрипт указывает !: .bind ("resize", listenWidth). Я не смог найти правильный способ изменить порядок divs с помощью jquery на загрузке страницы, а также изменить размер. Большое спасибо.

<script type="text/javascript"> 
jQuery(document).load($(window).bind("resize", listenWidth)); 

function listenWidth(e) { 
    if($(window).width()<767) 
    { 
     $("div.imagepanel.ip-middle").remove().insertAfter($("div.bgimagescale.image2")); 
    } else { 
     $("div.imagepanel.ip-middle").remove().insertBefore($("div.bgimagescale.image2")); 
    } 
} 
</script> 

Answer 1

Использование load и resize вместе, что-то вроде этого:

$(window).on("load resize",function(e){ 

Answer 2

я должен был бы видеть ваш HTML тоже, чтобы дать вам точный совет, но на самом деле вам не нужны никакие JS для этого вообще. Просто используйте чистые css и небольшой трюк с плавающей. Сначала установите оба divs на float слева.

div{ 
 
    float:left; 
 
    clear:both; 
 
    }

и на смену СМИ, просто изменить поплавок «вправо» - правый поплавок изменяет порядок элементов.

@media (max-width < 767px){ 
 
    div{ float:right } 
 
    }

Это все :)

Answer 3

Если CSS flex display вариант *, то нет никакой необходимости используйте jQuery.

.wrapper { display: flex; flex-direction: column; } 
 
.imagepanel.ip-middle { background: red; } 
 
.bgimagescale.image2 { background: green; } 
 
@media screen and (max-width: 766px) { 
 
    .imagepanel.ip-middle { order: 2; } 
 
    .bgimagescale.image2 { order: 1; } 
 
}

<p>Resize window to test</p> 
 
<div class="wrapper"> 
 
    <div class="imagepanel ip-middle">First div in source order</div> 
 
    <div class="bgimagescale image2">Second div in source order</div> 
 
</div>

* CSS прогибается is not widely supported at this time.