Change div order in CSS or javascript

Question

say I have layout like so:

<div id="main">            
    <div id="NormalContent">
        {some content which is a fixed length list}
    </div>
    <div id="FeaturedContent">
        {some content which may contain a long list}
    </div>
</div>

and I want to place FeaturedContent above NormalContent.

Can I do this with CSS? I assume I can with Javascript?

There is an obscure feature in CSS3 that would allow this - w3.org/TR/css3-content/#moving - Sadly that document is over 7 years old, and no browser has, as far as I know, made any attempt to implement this. — Alohci
– Alohci, Commented Jan 15, 2011 at 12:53
+1 Alohci, that is indeed obscure. to be honest, I'm glad that there aren't a bunch of CSS designers moving content around like that, so I'm not to sad the feature isn't implemented. — davin
– davin, Commented Jan 15, 2011 at 12:55

Hemlock · Accepted Answer · 2011-01-15 13:36:29Z

20

For a non-jquery answer

var content = document.getElementById('FeaturedContent');
var parent = content.parentNode;
parent.insertBefore(content, parent.firstChild);

Note that there is no need to remove it from the DOM, adding it a second time will move it.

answered Jan 15, 2011 at 13:36

Hemlock

6,2282 gold badges29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

davin · Accepted Answer · 2011-01-15 12:51:04Z

6

this is a clearer way to move them with 1 line of jQuery:

$('#FeaturedContent').prependTo('#main');

answered Jan 15, 2011 at 12:51

davin

45.6k9 gold badges81 silver badges78 bronze badges

Comments

sevenseacat · Accepted Answer · 2011-01-15 12:38:36Z

5

In Javascript you could simply reorder them on the page.

With CSS it would be possible to swap them left and right if they were side by side (with some conditions), but not one above the other.

answered Jan 15, 2011 at 12:38

sevenseacat

25.1k6 gold badges66 silver badges90 bronze badges

2 Comments

Nishant Over a year ago

but not one above the other........unless the element are fixed/absolute/relative positioned. upvote

Avi Over a year ago

How and How?...

Jimmy Chandra · Accepted Answer · 2011-01-15 12:47:47Z

2

If you know exactly the dimension of FeaturedContent & NormalContent, you might be able to get away with using position:relative and playing around w/ their top properties.

i.e.

#NormalContent {
  position:relative;
    top:22px;
}

#FeaturedContent {
  position:relative;
    top:-22px;
}

But to make them flow... hmm... not sure you can do that.

With jQuery you can do something like:

 $("#NormalContent").remove().insertAfter($("#FeaturedContent"));

answered Jan 15, 2011 at 12:47

Jimmy Chandra

6,5904 gold badges29 silver badges38 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:15:38Z

0

This answer seems to work aswel. CSS(3) only, very elegant solution.

CSS have a div that's to the right below the left div. Divs are reverse in HTML

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Jul 21, 2013 at 13:07

chocolata

3,3585 gold badges34 silver badges60 bronze badges

Collectives™ on Stack Overflow

Change div order in CSS or javascript

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related