Javascript 在台式机和移动设备之间重新排列div

我正在创建一个站点，但希望根据页面上的项目是在桌面上还是在移动设备上重新排列它们的顺序

因此，对于桌面，它是这样的：

然后对于移动设备，我想做一些类似的事情：

<div>
    <ul id="Menu1"></ul>    
    <div id="logo"></div>
    <ul id="Menu3"></ul>
    <div id="search"></div>
</div>

所有这些项目都是他们自己的div，我只是想要一种方法来重新排列它们

编辑 这真的很简单，所有的东西都是由PHP生成的

我现在的HTML是这样的：

<div>
    <div id="logo"></div>
    <div id="search"></div>
    <div id="nav">
        <ul id="Menu1"></ul>
        <ul id="Menu2"></ul>
        <ul id="Menu2"></ul>
    </div>
</div>

我希望它是这样的：

<div>
    <ul id="Menu1"></ul>    
    <div id="logo"></div>
    <ul id="Menu3"></ul>
    <div id="search"></div>
</div>

在我的例子中，我有两种选择来解决这个问题
1.渲染移动版和桌面版，一次只显示一个。这是一个快速的解决方案，但不是一个专业的方法
2.使用jquery或javascript
所以我假设每个div都知道移动和桌面机箱的顺序
移动和桌面的每个div宽度都在CSS中定义。
让我们定义这样一个div，例如

<div id="menu1" data-desktop-order="2" data-mobile-order="0"> Menu1 </div>
<div id="search-bar" data-desktop-order="1" data-mobile-order="3"> Search Bar </div> 
... 

Menu1
搜索栏
... 

并在resize event或documentReady中对div进行重新排序

window.onresize = function() {
    if (window.innerHeight <= 767) { /* Reorder divs for mobile cases */ }        
    if (window.innerWidth > 767) {  /* Reorder divs for desktop cases */ }
}

window.onresize=function（）{
if（window.innerHeight 767）{/*为桌面案例重新排序div*/}
}

对于重新排序div，您可以参考以下链接。

---

添加html代码如果只是布局更改，听起来像是媒体查询的工作。我的意思是使用媒体查询，但也可以：）您真的需要重新安排结构吗？你可以用JS来解决这个问题，但它的速度要慢得多，而且没有真正实现CSS所不能实现的任何功能（至少在布局方面）。你是否真的解决了一个不同的问题，并且对这个问题进行了过度简化？这就是媒体查询中使用的CSS显示

grid

。