代码之家 › 专栏 › 技术社区 › Paddy Hallihan

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

css html jquery javascript

-2

Paddy Hallihan · 技术社区 · 7 年前

我正在创建一个网站,但想重新安排的顺序,在网页上的项目取决于它是在桌面还是移动。

对于移动设备,我想做一些类似的事情:

编辑

这是真正的简化一切都是由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 回复 | 直到 5 年前

Eric Lee 7 年前

在我的例子中,我有两个选择来解决这个问题。

2使用jquery或javascript。
所以我假设每个div都知道它对移动和桌面机箱的顺序。
移动和桌面的每个div宽度都在CSS中定义。

<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> 
...

在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 */ }
}

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