Here’s a (quick and not fully tested) version where the original layout is put inside the div
#main – then anything that has the class
.boxes is copied (jQuery clone) to the randomising container :
So two main objects are used now – the original layout stays unchanged and the div
#container holds the copies, then show and hide are used to display them when either option is clicked.
One thing to keep in mind, better not to use unique identifiers inside the
.boxes element. Since they are cloned, it would create double identifiers (which is a no-no). But that’s easily avoided by only setting style with classes (like done with this pen). The
.boxes themselves (parent) can have unique ids because they are removed with cloning.
This should give complete freedom of design for the organised layout.