Javascript 根据具体决议重组部门

我有两个部门：

<div class="a">Lorem 1</a>
<div class="b">Lorem 2</a>

在分辨率小于480px的手机上更改订单的最简单方法是什么

我试着玩Appendo和prependTo，但运气不好。 主要问题是，这只需要在480px以下的分辨率上发生

---

有什么建议吗？

根据需要支持的浏览器，您可以结合使用flexbox和媒体查询

鉴于此标记：

<div class="container">
    <div class="a">Lorem 1</div>
    <div class="b">Lorem 2</div>
</div>

---

这将有效地扭转这两种局面。但是，

您可以轻松地使用。您不需要Javascript或jQuery。然而，浏览器的支持是有限的

@媒体最大宽度：768px{/*更改为480px，768px用于演示*/ .集装箱{ 显示器：flex； 弯曲方向：立柱；/*垂直堆叠*/ } .a{ 顺序：2；/*默认值为1，因此2将高于.b的顺序1*/ } } 洛雷姆1 洛雷姆2 使用javascript：

html

小提琴： 我测试得很快，看起来很有效，但要注意可能的bug！：

也许这篇文章可以帮助你：

@media screen and (max-width: 480px){
   .container{
       display: flex;
       flex-direction: row-reverse;
   }
}

<div id="container">
    <div class="a">Lorem 1</a>
    <div class="b">Lorem 2</a>
</div>

$(document).ready(function() {   
    $( window ).resize(function() {
        if( $(window).width() < 480 ) {
            $('.b').insertBefore($('.a'));
        }
    });
});

$(document).ready(function() { 

    var $a = $('.a');
    var $b = $('.b');

    $( window ).resize(function() {
        if( $(window).width() < 480 ) {
            $b.insertBefore($a);
        } else {
            if( $a.prev().is("div.b") ) {
                $a.insertBefore($b);  
            }
        }
    });
});