在响应式Web设计中更改布局时,HTML元素的切换顺序

Question

我正在构建一个响应式网站,为了获得良好的用户体验,我需要从移动设备到桌面的一些布局更改.具体来说,我需要切换一些HTML元素的顺序.

我需要HTML元素以不同的顺序用于桌面和移动.

移动

<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>

订单已切换为桌面

<div class="one">One</div>
<div class="three">Three</div>
<div class="two">Two</div>

这是我想要完成的简化版本.我认为它被称为渐进增强.网页设计专家如何移动html元素？用JavaScript？这是正常的吗？有没有jQuery插件？

Answer 1

根据您的布局,可以通过多种方式实现此目的.如果你的div在桌面上并排堆叠并且在移动设备上垂直堆叠,你可以使用浮动和媒体查询的组合来使它们以正确的顺序显示.

如果不是,你的最终后备可能是创建4个div.

<div>one</div>
<div>three(mobile)</div>
<div>two</div>
<div>three(desktop)</div>

然后使用媒体查询隐藏相关的"三"div,具体取决于设备.

Answer 2

只需使用jQuery根据需要更改DOM

if (mobile == true) {

    $('div.three').insertBefore($('div.two'));
}

Answer 3

恢复这个问题,因为我通过谷歌遇到它,现有的答案已经过时.我最终使用的解决方案是唯一一个带有downvote的解决方案,所以我将详细说明.

使用display:flex将允许您使用column/ column-reverseproperties 重新排序元素:

.container{ display:flex;flex-direction:column }
@media screen and (min-width:600px) {
  .container{ flex-direction:column-reverse }
}

见的jsfiddle 这里,和一些支持表格这里.

还可以在这里和这里查看几个CSS后处理器