在台式机和移动设备之间重新分配div

Question

我正在创建一个网站，但要根据在台式机还是移动设备上重新排列页面上项目的顺序。

因此对于台式机来说，是这样的：

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

所有这些项目都是它们自己的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>

Answer 1

就我而言，我有两种选择来解决此问题。
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> 
... 

并在调整大小事件或documentReady中对div重新排序

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

要重新排序div，您可以参考以下链接。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table