CODEWITHSUNDEEP
csshtml
alexgolec
alexgolec

Reputation: 28252

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>

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.

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."

Upvotes: 6

Views: 8649

Answers (4)

Harrison Ekpobimi
Harrison Ekpobimi

Reputation: 45

You can achieve this using flex

<div id="container">
  <div id="child1">1</div>
  <div id="child2">2</div>
</div>

#container {
  display: flex; 
  flex-direction: row-reverse;  
}

Upvotes: 2

asherstoppard
asherstoppard

Reputation: 834

The following code will sort your issue and according to caniuse.com is compatible with all browsers except for IE7 and below.

Full support on CSS table display can be found here

HTML

<div id="container">
    <div id="child1">1</div>
    <div id="child2">2</div>
</div>

CSS

#child2 {
    display:table-header-group;   
}
#child1 {
    display:table-footer-group;    
}

Upvotes: 2

nice ass
nice ass

Reputation: 16709

Yes, with flex boxes - http://jsfiddle.net/F8XMk/

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

#child1{
  order: 2;
}

#child2{
  order: 1;    
}

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

Upvotes: 14

Pekka
Pekka

Reputation: 449415

No, there is no way to do this in pure CSS. CSS focuses on the presentation part, not the structure of the data that is being displayed.

The next best thing that comes to mind is having duplicate content:

<div class="child1 even">...</div>
<div class="child2 odd">...</div>
<div class="child1 odd">...</div>
<div class="child2 even">...</div>

and hiding the odd class in one view, evenin another.

It's not great, and it may come with SEO side-effects in some situations, I'm not sure.

It's the only way that comes to mind that doesn't involve server-side processing or JavaScript, though.

Upvotes: 0

Related Questions