我正在构建一个响应式网站，为了获得良好的用户体验，我需要将布局从移动设备更改为桌面设备。具体来说，我需要切换一些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>
这是我想要完成的简化版本。我想它叫progressive enhancement。网页设计专家如何移动 html 元素？使用 JavaScript？会正常吗？有 jQuery 插件吗？
【问题讨论】：
根据您的布局，将有多种方法来实现这一点。如果您的 div 在桌面上并排堆叠，而在移动设备上垂直堆叠，您可以使用浮动和媒体查询的组合来让它们以正确的顺序显示。
如果不是，您的最终后备可能是创建 4 个 div。
<div>one</div>
<div>three(mobile)</div>
<div>two</div>
<div>three(desktop)</div>
然后根据设备使用媒体查询隐藏相关的“三”div。
【讨论】：
只需使用 jQuery 根据需要更改 DOM
if (mobile == true) {
$('div.three').insertBefore($('div.two'));
}
【讨论】：
$('div.3')... 而不是 three？
mobile 变量是基于视口设置的，则需要调整大小处理程序和额外的代码来反转顺序。你现在最好使用flexbox 和order：caniuse.com/#search=flexbox。
复活这个问题，因为我是通过谷歌遇到的，现有的答案已经过时了。我最终使用的解决方案是only one with the downvote，所以我会详细说明。
使用display:flex 将允许您使用column/column-reverse 属性重新排序元素：
.container{ display:flex;flex-direction:column }
@media screen and (min-width:600px) {
.container{ flex-direction:column-reverse }
}
【讨论】：
flex-direction 与 row 和 row-reverse。
order 子级属性将为此目的派上用场。然而，可访问性说明：屏幕阅读器目前都按 DOM 顺序阅读内容，忽略了 order 通过 CSS 进行的更改。
你可以通过jquery做到这一点你需要做的是检查设备并根据它插入
阅读响应式网页设计也很不错，您将在其中学习类似的东西检查这个问题Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques
我在这里找到了很好的提示并检查了这个
【讨论】：
以下代码将在移动设备上堆叠 div，在桌面设备上将是 2 列布局
<div class="main">
</div>
<div class="aside">
</div>
<style type="text/css">
@media only screen and (min-width: 768px) {
.main {float:right;width:60%}
.aside {float:left;width:40%}
}
</style>
【讨论】：
尝试： 显示：弯曲； 弹性方向：列；
更多信息在这里： https://developer.mozilla.org/en-US/docs/Web/CSS/flex
【讨论】：