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 - http://www.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, Jan 15 '11 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, Jan 15 '11 at 12:55

score 18 · Answer 1 · answered Jan 15 '11 at 13:36

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.

score 6 · Answer 2 · answered Jan 15 '11 at 12:51

6

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

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

answered Jan 15 '11 at 12:51

davin

44,863
9
78
78

score 4 · Accepted Answer · answered Jan 15 '11 at 12:38

4

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 '11 at 12:38

sevenseacat

24,699
6
63
88

but not one above the other........unless the element are fixed/absolute/relative positioned. upvote – Nishant Feb 10 '16 at 09:28
How and How?... – Avi Dec 02 '22 at 17:45

score 2 · Answer 4 · answered Jan 15 '11 at 12:47

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"));

score 0 · Answer 5 · edited May 23 '17 at 12:15

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 '17 at 12:15

Community

1
1

answered Jul 21 '13 at 13:07

chocolata

3,258
5
31
60

Change div order in CSS or javascript

5 Answers5

Linked