Javascript 在不使用jQuery的情况下，仅以一定的宽度执行Jscript

好吧，为了不占上风，我一直在尝试使用下面的JScript命令（不带jQuery）更改下面div的顺序，仅当窗口处于某个宽度时尤其是1024px及以下。使用的JScript成功地执行并随后更改了div的顺序，但是它在所有宽度上都会发生

当窗口宽度等于或小于1024px时（不使用jQuery），我希望box-3高于box-1

var content=document.querySelector（'.box-3'）；
var parent=content.parentNode；
parent.insertBefore（内容，parent.firstChild）；

提前谢谢

---

编辑：这个问题不同于“基于屏幕大小执行函数”（由Jim编写），因为给Jim的解决方案包括并接受了jQuery，而这个问题纯粹是针对普通Javascript的，所以您使用的是

window.onresize

建议的编辑和要点：

如果希望在调整窗口大小之前进行重新排序，请确保在使用

window.onload

打开页面时检查窗口大小。为了使一切更加简洁，您可以将重新排序代码放入函数中，比如说

myResizeFunction（）

，然后执行类似的操作

var needsReset = false;
window.onresize = function() {
    if( this.innerWidth <= 1024 ) {
        myResizeFunction();
    } else {
        if( needsReset ) {
            //UNDO THE REORDER OR
            //WHATEVER CODE YOU WANT IF SCREEN IS LARGER THAN TARGET SIZE
        }
    }
}
window.onload = function() {
    if( this.innerWidth <= 1024 ) {
        myResizeFunction();
    }
    //NO ELSE BLOCK NEEDED BECAUSE
    //IF SCREEN SIZE ISN'T IN TARGET RANGE WE HAVE NOTHING TO UNDO
}
function myResizeFunction() {
    //NOW YOUR REORDER CODE LIVES HERE
    //SET needsReset TO true BECAUSE WE'VE CHANGED THE ORDER OF ELEMENTS
    needsReset = true;
}

var needsReset=false；
window.onresize=函数（）{
如果（this.innerWidth您试图让它只出现在您想要的屏幕大小上吗？@obsidiange的可能副本我读过，但发现很难理解/转换到我的需要：/@SidTheBeard各种“onresize”函数、mq等，但老实说，我对它们的特定功能不是100%确定，我对Jscript和tryi是新手ng将这些片段放在一起hahaThank you，它在宽度为1024时执行，但不确定如何撤消重新排序尝试过的parent.insertBefore（content，parent.fourthChild）；但不相信这是对的：/@KAindex尝试一下我所做的更改，看看是否有效。我不相信它有效，它可能在我这边，我不确定，但当宽度扩大时，是的，box-3处于其原始位置，但是宽度的微小变化，即使是1像素，无论是扩大还是缩小宽度，都会最后发送box-3:/@KAindex我添加了一个您需要检查的布尔变量，如果该变量为true，则需要重置元素。否则，元素将保持原样。但是，我应用了此方法，“parent.lastChild”仍然在“lastChild”后插入框-3，即框-4，而不是在它之前？
var needsReset = false;
window.onresize = function() {
    if( this.innerWidth <= 1024 ) {
        myResizeFunction();
    } else {
        if( needsReset ) {
            //UNDO THE REORDER OR
            //WHATEVER CODE YOU WANT IF SCREEN IS LARGER THAN TARGET SIZE
        }
    }
}
window.onload = function() {
    if( this.innerWidth <= 1024 ) {
        myResizeFunction();
    }
    //NO ELSE BLOCK NEEDED BECAUSE
    //IF SCREEN SIZE ISN'T IN TARGET RANGE WE HAVE NOTHING TO UNDO
}
function myResizeFunction() {
    //NOW YOUR REORDER CODE LIVES HERE
    //SET needsReset TO true BECAUSE WE'VE CHANGED THE ORDER OF ELEMENTS
    needsReset = true;
}