javascript - Jquery 在调整大小时交换 div

Question

所以我正在处理的网站有一个小问题。

我有一个动态创建的 popUp div，弹出窗口需要响应，所以问题是当窗口宽度低于 768px 时，我想在 popUp 中交换 2 个 div。

我不会用我的大量代码造成污染，但会简化它。

(function($) {
function resize() {
var $window = $(window);
    if ($window.width() < 768) {
        add/remove classes
    }
}
function viewEvent {
    $("div.main_view").prepend("<div class='row popUp' id='popUp' style='max-width:700px; margin-right:5px;'></div>");
   $popUp.append("<div class='inner_boxed col-xs-12 col-sm-7 col-md-7 col-lg-7' id='inner'></div>");
   var $text = $("div#text");
   $text.append(lorem);
   var $img = ("<div class='col-xs-12 col-sm-5 col-md-5 col-lg-5' id='img' style='margin-top: 1.5rem; min-height: 250px;'><img src='img/train_deal.jpg'></div>");
   $popUp.append($img);
   resize();
}
 viewEvent();
 $window
        .resize(resize)
        .trigger('resize');
})(jQuery);

所以目前，我在文本后得到图像。

所以当宽度达到 768 或更低时，我希望我的图像出现在文本之前，当宽度达到 768 或更高时我希望它全部返回。

Answer 1

要交换彼此相邻的两个元素，您可以使用 .insertBefore() 或/和 .insertAfter() 类似这样的东西

$(document).ready(function(){
   $(window).on('resize' , function(){
            resize('#div1' , '#div2');
   });

});

function resize(el1 , el2){
    var $window = $(window);
    if($window.width() <= 400){
         $(el2).insertBefore(el1);
    }else{
         $(el2).insertAfter(el1);
    }
}

Working Example