jquery更改文档流

我想根据屏幕宽度重新排列文档流。在我的示例中，我尝试根据屏幕宽度前后重新定位两个div

第一个是一个菜单div，当屏幕宽度为480px时，我想在文档中向上移动到标题div之后，然后每当屏幕宽度大于480px时，移回其默认位置。代码的这一部分工作得很好

但另一个部门的搜索框不是。在我的示例中，当屏幕宽度低于480px时，我希望将表单元素从另一个名为#headerRight的div元素移动到#footer元素内，但移动到#footer元素中之前的任何其他元素

我是通过jquery中的.prepend（）命令来实现的。然后当屏幕宽度大于480px时。 我想将它移回其在#headerRight div中的原始位置

因此，当宽度小于480时，form元素会按其应有的方式工作，它会在该div中的任何内容之前移动到#footer div中。但是当我将屏幕宽度调整到480px以上时，它不会返回到#headerlight div中的原始位置。 这是我的护照

$（函数（）{
$（窗口）。调整大小（ChangeDiv）；
$（窗口）。触发器（“调整大小”）；
});
函数ChangeDiv（）{
变量宽度=$（窗口）.width（）；
如果（宽度解决它：）这是我使用的代码：

$(function () {
    $(window).resize(ChangeDiv);
    $(window).trigger("resize");   
});

function ChangeDiv() {
    var width = $(window).width();
    if (width <= 480) {
        $("#menu").after($("#header"));
        $("#headerRight form").prependTo($("#footer"));
    } else {
        $("#header").after($("#menu"));
        $("#footer form").appendTo($("#headerRight"));
    }
}

$（函数（）{
$（窗口）。调整大小（ChangeDiv）；
$（窗口）。触发器（“调整大小”）；
});
函数ChangeDiv（）{
变量宽度=$（窗口）.width（）；
如果（宽度看起来就像你在张贴的小提琴上描述的那样。实际上不是这样，因为当搜索框的大小调整到大于480px时，搜索框会留在页脚中。当大于480px时，菜单会恢复到原来的位置，但serachbox不会。你在
headerRight
之前缺少了一个
。@CBro是的，你是正确的，但是通过这样做，页脚被放置在页眉中，然后当调整到480px以下时，页脚和搜索框消失了，并且在调整到480px以上时保持不变。我现在使用了以下代码：$（function（）{$（window）.resize（ChangeDiv）；$（window.trigger（“resize”）；}）；函数ChangeDiv（）{var width=$（窗口）.width（）；if（宽度
$(function () {
    $(window).resize(ChangeDiv);
    $(window).trigger("resize");   
});

function ChangeDiv() {
    var width = $(window).width();
    if (width <= 480) {
        $("#menu").after($("#header"));
        $("#headerRight form").prependTo($("#footer"));
    } else {
        $("#header").after($("#menu"));
        $("#footer form").appendTo($("#headerRight"));
    }
}