css3 - Responsive design that manipulates multi-column content -

i implement ui 1 or 2 columns depending on screen/device width. i'm using ajax load data these 2 columns , append according item heights both columns take approx. same amount of vertical space.

everything's ok if user keeps browser window size same @ time, because initial loading either fill 1 or 2 columns. problem arises when user resizes window have consolidate content accordingly:

• smaller size hides column 2 , it's items should inserted columns 1 in correct order
• larger size displays both columns , takes content column 1 , puts column 2

i can use javascript this, wondering whether it's possible same in css way?

an example of google+ works 1..3 columns depending on content width.

i came solution of own

it possible using css maybe not feasible

feasible in terms of resource consumption. when adding items on page, put all of them in column 1 adding additional css class position in column 2.

responsive media queries either:

1. hide column 2 , show additional items in column 1 (based on css class).
2. show column 2 , hide items appropriate css class in column 1

that's way avoid javascript processing when user resizes browser window.

the problem

the problem there functionality when display lots of items, because dom have on average 50% more nodes approximately half of items duplicated across page (even though 1 copy of duplicates shown @ time).