Inserting div wrappers - changing hierarchy of the html I have placed a number of blocks in my Main Section of the site. I have finished all the standard styling for the site, but now that I've moved on to the mobile/phone layouts, I find that I need more control over this list of blocks - I need to wrap some of these blocks so as to position them properly.

Image: http://i720.photobucket.com/albums/ww203/Nongolf/divhierarchy.jpg

I have looked at CCS Injector (which would be more aptly named 'CSS Adder'), and moving blocks for mobile browsers, but far as I can tell I can only move all blocks or none at all.

I really do not want to change the default sections for the blocks now, as the styles are all in place and would be largely ruined by moving them to another section.

So now I'm about to use some jQuery magic to strong-arm the html. But before I do so I wanted to ask you good people if there's another way?
Completely forgot to return and give my solution. This is it:


jQuery(document).ready(function() {
    my_selection = [];
    my_selection.push(['#block-views-dyn-box-1-slider-block']);
    my_selection.push(['#block-views-dyn-box-2-slider-block']);
    my_selection.push(['#block-views-dyn-box-3-slider-block']);
    my_selection.push(['#block-views-dyn-box-4-slider-block']);
    my_selection.push(['#block-views-static-boxes-test-block']);
    jQuery( my_selection.join(',')).wrapAll('&ltdiv class="dyn-box-wrap"&gt&lt/div>');
});


I'm little more than a jquery novice, so I'm sure there are more efficient ways, but this worked just fine for me.