好吧，尽管很多尝试都没有占上风，但我一直试图在窗口处于一定宽度时使用以下JScript命令（不使用jQuery）来改变下面div的顺序;特别是1024px及以下。使用的JScript成功执行并随后更改div的顺序，但它出现在所有宽度上。
我希望当窗口宽度等于或小于1024px时（不使用jQuery），box-3在box-1之上。
<html>
<body>
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
</body>
</html>
<script type="text/javascript">
var content = document.querySelector('.box-3');
var parent = content.parentNode;
parent.insertBefore(content, parent.firstChild);
</script>
提前致谢！
编辑：问题不同于“基于屏幕大小的执行功能”（由Jim编写），因为给予Jim的解决方案包括 - 并接受 - jQuery，而这个问题纯粹是针对vanilla 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;
}
我在移动设备上，所以我无法测试DOM如何变化但是尝试使用parent.lastChild。
如果你正在移除.box-3，然后将它插入.box-1（我相信这就是发生的事情），那么在insertBefore上做一个parent.lastChild应该把盒子3放回原来的位置