Jquery 更改屏幕大小的div顺序

我知道这应该很简单，但它只是不玩球，我做错了什么？

试试这个，我不知道，但我希望它能起作用：）

---

你试过Flexbox订购吗

.container{
显示器：flex；
}
.container>div{
显示：块；
填充：1em 0；
弹性：1；
背景色：红色；
}
@介质（最大宽度：800px）{
.首先{
顺序：2；
}
}

第一
第二

试试这个

function checkPosition() {
    if (window.matchMedia('(max-width: 820px)').matches) {
        //...
    } else {
        //...
    }
}

B
徽标
徽标
A.
还有JS
$（函数（）{
$（窗口）。调整大小（函数（）{
var w=$（window.width（）；
if（w<768&&$（'#column1'）.children（）.length>1）{
$（'#B'）。prependTo（$（'#column2'）；
}else if（w>768&&$（'#column2'）.children（）.length>1）{
$（'#B'）。prependTo（$（'#column1'）；
}
});
});

您甚至可以尝试这样做，只需添加jquery方法

resize（）

，如下所示

<div class="container">
        <div id="column1" class="row col-xs-6 col-sm-8">
            <div id="B" class="col-xs-12 col-sm-6">B</div>
            <div id="logo" class="col-xs-12 col-sm-6">Logo<br/>Logo</div>
        </div>
        <div id="column2" class="row col-xs-6 col-sm-4">
            <div id="A" class="col-xs-12 col-sm-12 ">A</div>
        </div>
    </div>
    and the JS

    $(function() {
        $(window).resize(function() {
            var w = $(window).width();
            if (w < 768 && $('#column1').children().length > 1) {
                $('#B').prependTo( $('#column2') );
            } else if (w > 768 && $('#column2').children().length > 1) {
                $('#B').prependTo( $('#column1') );
            }
        });
    });

$（窗口）。调整大小（函数（）{
var wd=$（window.width（）；
如果（wd<820）{
美元（“.first”）。之后（$（“.second”）；
}
否则{
元（“.first”）。之前（$（“.second”）；
}
});

大字标题
厄运的知识产权文本

查看以下代码：

$（窗口）.on（“调整大小”，函数（）{
$（“.currentwidth”）.text（$（window.width（））；
如果（$（窗口）.width（）<820）{
$（“.first”）.insertAfter（$（.second”）；
}否则{
$（“.first”）.insertBefore（$（.second”）；
}
})

---

我们已将

调整大小

事件附加到

窗口

以捕获较新的屏幕宽度。

我认为更好的解决方案是使用flexbox，或者如果您使用带

拉

和

推

类的引导，但还有另一个有趣的解决方案：

。首先，
.第二{
背景：#ccc；
文本对齐：居中；
保证金：5px0；
}
@介质（最大宽度：820像素）{
.集装箱{
显示：表格；
边界间距：0 5px；
宽度：100%；
}
.首先{
显示：表格行组；
}
.第二{
显示：表头组；
}
}

1.
2.

如果使用bootstrap，您可以使用pull/push类来实现这一点。这是因为当有足够的空间时，它们首先会浮动到原始位置。然而，当大小到中等并且空间丢失时，它们就会堆叠起来，因为它们不能互相漂浮。请注意，虽然我对这两个都使用了6列，但即使它们不是我要建议的全部6列，这仍然有效。保存jQuery@chobbit并尝试学习更多CSS，您将难以置信地加快网站的开发和实际加载速度！虽然我可以看到，由于某些原因，这不适用于我的代码，但应该适用于其他许多代码，所以谢谢：）我尝试了提供的所有代码，真的希望这个CSS工作，因为如果可以的话，我更喜欢使用CSS而不是脚本。谢天谢地，blonfu下面使用表行组和表行标题的CSS代码与我的代码配合使用，所以我仍然避免使用脚本：）这段代码对我来说非常有效，我真的希望不必使用脚本，只使用CSS。我可以看出安迪·霍夫曼的代码应该也能工作，但出于什么原因我的代码不能工作，所以我必须声明这是我最好的答案。谢谢：）这是我最初的jquery的一个很好的替代品，所以谢谢，很遗憾，我不得不放弃能够用CSS而不是脚本来实现这一点，所以你错过了。但谢谢，这对人们来说很有用：）

function checkPosition() {
    if (window.matchMedia('(max-width: 820px)').matches) {
        //...
    } else {
        //...
    }
}

<div class="container">
        <div id="column1" class="row col-xs-6 col-sm-8">
            <div id="B" class="col-xs-12 col-sm-6">B</div>
            <div id="logo" class="col-xs-12 col-sm-6">Logo<br/>Logo</div>
        </div>
        <div id="column2" class="row col-xs-6 col-sm-4">
            <div id="A" class="col-xs-12 col-sm-12 ">A</div>
        </div>
    </div>
    and the JS

    $(function() {
        $(window).resize(function() {
            var w = $(window).width();
            if (w < 768 && $('#column1').children().length > 1) {
                $('#B').prependTo( $('#column2') );
            } else if (w > 768 && $('#column2').children().length > 1) {
                $('#B').prependTo( $('#column1') );
            }
        });
    });

$(window).resize(function(){
var wd = $(window).width();
if ( wd < 820) {
   $( ".first" ).after( $( ".second" ) );
}
else {
   $( ".first" ).before( $( ".second" ) );
}
});

<div class="row row-fluid">
   <div class="col-md-6 col-md-push-6">
       <img src="some-image.png">
   </div>

   <div class="col-md-6 col-md-pull-6">
       <h1>Headline</h1>
       <p>Lorem ipsum text of doom</p>
   </div>
</div>

$(window).on("resize", function() {
  $(".currentwidth").text($(window).width());
  if ($(window).width() < 820) {
    $(".first").insertAfter($(".second"));
  } else {
    $(".first").insertBefore($(".second"));
  }

})