在响应式网页设计中布局更改时切换 HTML 元素的顺序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12859045/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Switching order of HTML elements when layout changes in Responsive Web Design
提问by Lex Semenenko
I am building a responsive website, and for good user experience, I need some layout changes from mobile to desktop. Specifically, I need to switch the order of some HTML elements.
我正在构建一个响应式网站，为了获得良好的用户体验，我需要从移动设备到桌面设备进行一些布局更改。具体来说，我需要切换一些 HTML 元素的顺序。
I need HTML elements be in a different order for desktop vs mobile.
我需要 HTML 元素在桌面和移动设备上的顺序不同。
Mobile
移动的
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
Order switched for Desktop
桌面切换顺序
<div class="one">One</div>
<div class="three">Three</div>
<div class="two">Two</div>
This is simplified version of what I want to accomplish. I think it's called progressive enhancement. How do web design experts move html elements around? With JavaScript? Would it be normal? Are there any jQuery plugins?
这是我想要完成的简化版本。我认为这叫做渐进增强。网页设计专家如何移动 html 元素？用 JavaScript？会正常吗？有没有 jQuery 插件？
采纳答案by trapper
Just use jQuery to change the DOM around as required
只需使用 jQuery 根据需要更改 DOM
if (mobile == true) {
$('div.three').insertBefore($('div.two'));
}
回答by Bob Grant
Depending on your layout there will be a number of ways of achieving this. If your divs are stacking side by side on the desktop and vertically on mobile you might be able to use a combination of floats and media queries to get them displaying in the right order.
根据您的布局，将有多种方法可以实现这一点。如果您的 div 在桌面上并排堆叠，在移动设备上垂直堆叠，您可以使用浮动和媒体查询的组合来让它们以正确的顺序显示。
If not your final fallback might be to create 4 divs.
如果不是，您的最终回退可能是创建 4 个 div。
<div>one</div>
<div>three(mobile)</div>
<div>two</div>
<div>three(desktop)</div>
Then use media queries to hide the relevant "three" div depending on the device.
然后根据设备使用媒体查询隐藏相关的“三个”div。
回答by mzmm56
Resurrecting this question because i came across it via google, and the existing answers are outdated. The solution i ended up using was the only one with the downvote, so i'll elaborate on it.
重新提出这个问题是因为我是通过谷歌遇到的，现有的答案已经过时了。我最终使用的解决方案是唯一一个投反对票的解决方案，所以我将详细说明。
Using display:flexwill allow you to re-order elements using the column/column-reverseproperties:
Usingdisplay:flex将允许您使用column/column-reverse属性重新排序元素：
.container{ display:flex;flex-direction:column }
@media screen and (min-width:600px) {
.container{ flex-direction:column-reverse }
}
See the JSFiddle here, and some support tables here.
回答by NullPoiиteя
You can do this by jquery what you need to do is check the device and insert according to it
您可以通过 jquery 执行此操作，您需要做的是检查设备并根据它插入
also its good to read responsive webdesign where you will learn stuff like that check this qustion Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques
阅读响应式网页设计也很不错，在那里你会学到类似的东西，检查这个问题响应式网页设计技巧、最佳实践和动态图像缩放技术
i found here good tips and also check this
我在这里找到了很好的提示，也检查了这个
回答by piscript
Following code will stack the div in mobile and on desktop it would be a 2 column layout
以下代码将在移动设备上堆叠 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>
回答by Bruno
Try with: display: flex; flex-direction: column;
尝试使用： display: flex; 弹性方向：列；
More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/flex
更多信息在这里：https: //developer.mozilla.org/en-US/docs/Web/CSS/flex
