响应式Web设计中布局更改时HTML元素的切换顺序
我正在建立一个响应迅速的网站，为了获得良好的用户体验，我需要从手机到桌面进行一些布局更改。具体来说，我需要切换一些HTML元素的顺序 我需要HTML元素在桌面与移动不同的顺序 移动响应式Web设计中布局更改时HTML元素的切换顺序,html,css,Html,Css,我正在建立一个响应迅速的网站，为了获得良好的用户体验，我需要从手机到桌面进行一些布局更改。具体来说，我需要切换一些HTML元素的顺序 我需要HTML元素在桌面与移动不同的顺序 移动 <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> 1 两个 三 桌面订单切换 <div class="one">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
1
两个
三
<div class="one">One</div>
<div class="three">Three</div>
<div class="two">Two</div>
1
三
两个
这是我想要完成的简化版本。我想它叫。网页设计专家如何移动html元素？使用JavaScript？这正常吗？有jQuery插件吗？您可以通过jQuery完成这项工作，您需要做的是检查设备并根据它进行插入 阅读响应性网页设计也很好，在这里你可以学到类似的东西，请查看此问题 我在这里找到了一些很好的提示，也检查了一下
只需使用jQuery根据需要更改DOM即可
if (mobile == true) {
$('div.three').insertBefore($('div.two'));
}
根据您的布局，将有多种方法实现这一点。如果您的div在桌面上并排堆叠，在移动设备上垂直堆叠，则您可以使用浮动和媒体查询的组合，使它们以正确的顺序显示 如果不是这样的话，您的最终退路可能是创建4个div
<div>one</div>
<div>three(mobile)</div>
<div>two</div>
<div>three(desktop)</div>
1
三（移动）
二
三（桌面）
然后使用媒体查询隐藏相关的“三个”div，具体取决于设备。以下代码将在移动设备和桌面上堆叠该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>
@仅介质屏幕和（最小宽度：768px）{
.main{浮动：右；宽度：60%}
.aside{浮动：左；宽度：40%}
}
重新提出这个问题，因为我是通过谷歌找到的，而现有的答案已经过时了。我最终使用的解决方案是，所以我将详细说明 使用
display:flex列列反转.container{ display:flex;flex-direction:column }
@media screen and (min-width:600px) {
.container{ flex-direction:column-reverse }
}
还可以查看一些CSS后期处理程序，谢谢。我只是不确定这是否是一个好的做法。在我的特殊情况下，如果我要操纵DOM，那么HTML5大纲就会以我不希望的方式受到影响。似乎我必须在满足业务需求的良好视觉用户体验和结构良好的HTML5大纲之间做出选择。示例不应该读
$（'div.3'）…threemobileflexboxorderflex directionrowrow reverseorder顺序