用CSS切换块元素的顺序
短篇故事
比方说，我的HTML已经成立：
<div id="blockA">Block A</div> <div id="blockB">Block B</div> <div id="blockC">Block C</div> 它看起来像这样：
------------ | Block A | ------------ | Block B | ------------ | Block C | ------------
现在我想切换块的顺序。 我怎样才能做到这一点只有CSS ？
------------ | Block C | ------------ | Block A | ------------ | Block B | ------------
我知道有这样的hacky解决scheme，如使用position:absolute ，但是这并不能保证display:block属性的有效使用。 也就是说，块在尺寸增大时向下推动其他块。
很长的故事
当用户使用计算机查看我的网页时，块按以下顺序显示：
- 基本信息。
- 活动时间表。
- iPhone应用广告
iPhone应用程序的广告放在最后，因为这对计算机用户来说不是非常重要。 一小部分电脑用户将甩出手机并安装应用程序。
如果一个移动用户来到这个网站，iPhone应用广告应该是页面上最重要的东西。 因此，它应该被移到顶端：
- iPhone应用广告
- 基本信息。
- 活动时间表。
我想让iPhone和电脑用户共享相同的HTML，但是有一个CSS媒体查询切换块的顺序。
@media only screen and (max-device-width: 480px) { #blockC { /* magic order switching */ } }
正如已经提出的那样， Flexbox就是答案 – 尤其是因为您只需要支持一个现代浏览器：Mobile Safari。
请参阅： http : //jsfiddle.net/thirtydot/hLUHL/
如果你喜欢，你可以删除-moz-前缀属性，我只是留给未来的读者。
CSS：
#blockContainer { display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } #blockA { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; box-ordinal-group: 2; } #blockB { -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; box-ordinal-group: 3; }
HTML：
<div id="blockContainer"> <div id="blockA">Block A</div> <div id="blockB">Block B</div> <div id="blockC">Block C</div> </div>
这是一个“尽可能简单”的例子，用于改变div元素的顺序（当调整浏览器窗口大小时）：
<!DOCTYPE html> <html> <head> <title>foobar</title> <style> @media screen and (max-width:300px){ #parent{ display:flex; flex-flow: column; } #a{order:2;} #c{order:1;} #b{order:3;} } </style> </head> <body> <div id="parent"> <div id="a">one</div> <div id="b">two</div> <div id="c">three</div> </div> </body> </html>
例如： http : //jsfiddle.net/devnull/qyroxexv/ （更改窗口宽度以查看更改div的顺序的效果）
我知道这是旧的，但我find了一个更简单的解决scheme，它适用于IE10，Firefox和铬：
<div id="wrapper"> <div id="one">One</div> <div id="two">Two</div> <div id="three">Three</div> </div>
这是CSS：
#wrapper {display:table;} #one {display:table-footer-group;} #three {display:table-header-group;}
结果是：
"Three" "Two" "One"
我在这里find了
更新：两个轻量级CSS解决scheme：
使用flex ， flex-flow和order ：
示例1：演示小提琴
body{ display:flex; flex-flow: column; } #blockA{ order:4; } #blockB{ order:3; } #blockC{ order:2; }
或者，反转Y尺度：
例2：演示小提琴
body{ -webkit-transform: scaleY(-1); transform: scaleY(-1); } div{ -webkit-transform: scaleY(-1); transform: scaleY(-1); }
这个方法适用于我没有flexbox：
#blockA, #blockB, #blockC { border: 1px solid black; padding: 20px; } .reverseOrder, #blockA, #blockB, #blockC { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
<div class="reverseOrder"> <div id="blockA">Block A</div> <div id="blockB">Block B</div> <div id="blockC">Block C</div> </div>
HTML：
<div id="blockC second-order">Block C</div> <div id="blockA">Block A</div> <div id="blockB">Block B</div> <div id="blockC first-order">Block C</div>
CSS
.second-order { display: none; } @media only screen and (max-device-width: 480px) { .first-order: { display: none; } .second-order: { display: block; } }
我认为这是非愚蠢的解决scheme，因为在大多数情况下重复内容是没有问题的，如果是广告，你会重复不了很多内容。
尽pipe一年过去了，但我已经回答了这个问题，因为我正在寻找解决办法，我读了这个，并得到了这个想法。
<div id="container"> <div id="a">Block A</div> <div id="b">Block B</div> <div id="c">Block C</div> </div>
可以说块的高度是100px
#container {position:relative; height: 300px;} #a, #b, #c {position:absolute; height: 100px} #c {top: 0px;} #b {top: 100px;} #a {top: 200px;}
你可能会陷入利润： http : //jsfiddle.net/zV2p4/
但是你可能会更好地使用position: absolute 。 这不会改变display: block ，但它会使宽度自动。 为了解决这个问题，使divs width: 100%
我设法用CSS display: table-* 。 我还没有testing超过3个街区。
小提琴
可能在CSS3中： http : //www.w3.org/TR/css3-writing-modes/#writing-mode
为什么不改变标签的订单？ 你的HTML页面不是用石头做的，是吗？
对于低科技来说这是一个好消息
将广告放置在顶部和底部，并使用媒体查询来显示：不适用。
如果广告不是太大，就不会为下载添加太多尺寸，甚至可以自定义广告发送给iPhone / PC的位置。
