我可以使用CSS来颠倒两个元素的显示顺序吗？ [英] Can I use CSS to reverse the display order of two elements?

问题描述

这听起来很疯狂，但是忍受着我。我正在写一个基本上由以下内容组成的页面：

This sounds crazy, but bear with me. I'm writing a page that basically consists of the following:

<div id="container">
    <div id="child1">...</div>
    <div is="child2">...</div>
</div>

我希望页面显示不同，具体取决于是为屏幕呈现还是打印，通过媒体查询的魔力。特别是，在打印时，我想在 ＃child1 上显示＃child2 >。

I want the page to appear different depending on whether it's being rendered for the screen or for printing, implemented through the magic of media queries. In particular, when printing, I want #child2 to appear on the page before #child1.

有没有办法我可以交换他们的订单，而不诉诸javascript，最好没有讨厌的绝对定位和whatnot？

Is there any way I can swap their order without resorting to javascript, and preferably without nasty absolute positioning and whatnot?

我应该添加，之前在这个上下文中的意思是直接在下。

I should add, "before" in this context means "directly under."

推荐答案

http://jsfiddle.net/F8XMk/

#container{
  display: flex;    
  flex-flow: column;
}

#child1{
  order: 2;
}

#child2{
  order: 1;    
}

更好的浏览器支持flex是相当不错的。你也可以用负边距来破解它：）

Newer browser support for flex is pretty good. You could also hack your way through it with negative margins :)

这篇关于我可以使用CSS来颠倒两个元素的显示顺序吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！