问个 CSS 问题

[83f420984]

现有布局，A与B的高度未知，宽度未知，A在上面，B在下面，结构也是A在B前面，如何在不改变结构的情况下，让A与B的位置调换？即B在上，A在下面；

用CSS方法实现优先考虑；

请指点，谢谢

[Mcatt]

position:absolute 定位？

[jsonline]

把AB的父容器用CSS3倒个个儿，再把AB分别倒个个儿。。。

[pagecho]

如果按一楼绝对定位，需要元素的高度啊，就需要用到js来协助了。
如果要纯css,楼主可以对这两个元素外面的大容器作180度旋转，然后对这两个元素作180旋转，就倒排了。之前v2ex上有个倒排li的帖子出现过这个方法。

[ZhaoMiing]

@pagecho +1 这种方法还可以用来做「卡片翻转」效果，不过在ie系下backface-visibility会有问题。

[cutehalo]

给A,B的父级 加上-webkit-transform: rotate(180deg); 再分别给A,B加上-webkit-transform: rotate(180deg);
这样就行了XD

[crs0910]

<script src="https://gist.github.com/qusiba/cebe258e76cbcb6aba66.js"></script>

[ianva]

lz 的项目如果不在意低级浏览器可以尝试 flexible，order 属性很轻松做到一切，现在在手机版的项目上用上了。
http://www.w3.org/html/ig/zh/css-flex-1/

[jsonline]

order 更靠谱。楼主给的条件不够清楚。

[83f420984]

@jsonline
@pagecho
谢谢，这思维太给力了

[iamjs]

@pagecho 记忆犹新。。秒杀js的回答

[NemoAlex]

@crs0910 这个方法有个问题：无法撑开容器
外层容器的高度会跟 B 一样，而 A 的高度又是未知的
这样如果 A 和 B 下面还有东西要放的话，就不太好弄了

[L3au]

仅考虑实现，还是flex
.container {
display: flex;
flex-direction: column-reverse;
}
http://www.w3cplus.com/css3/css3-flexbox-cheat-sheet.html

[kmokidd]

如果不需要兼容浏览器，受到之前一个CSS旋转1000个列表的问题的启发，可以把AB外层的容器旋转180度，再将AB分别旋转180度

jsfiddle: http://jsfiddle.net/QBEs4/

[kmokidd]

@cutehalo 啊啊sorry 没有看到已经有人用这个方法了= =