On Media query jquery remove div from sidebar

Question

I am using jquery to remove two divs .twitter and .email from their original positions when the max-width is 959px and place these two divs after the div #maininner .

When the max width is larger than 959px, I would like these two divs to go back to their original positions: both are inside their own div class .grid-box.width100.grid-v which are inside #sidebar-a .

The problem is that there are multiple .grid-box.width100.grid-v inside #sidebar-a. How do I get the two divs .twitter and .email to go into the two empty .grid-box.width100.grid-v that they are removed from?

Note: I am unable to put separate classes on the multiple div class .grid-box.width100.grid-v.

$.onMediaQuery('(max-width: 959px)', {
        valid: function() {
        $("#sidebar-a ").remove().insertBefore($("#maininner"));    
        $(".twitter").remove().insertAfter($("#maininner"));
        $(".email").remove().insertAfter(("#maininner"));

        },

        invalid: function() {
        $("#sidebar-a").remove().insertAfter($("#maininner"));
        $(".twitter").remove().appendTo($(".grid-box.width100.grid-v"));
        $(".email").remove().appendTo($(".grid-box.width100.grid-v"));

        }
    });

Thanks in advance for any help! :D

Answer 1

I think the best way would be to use $.clone() in order to clone the .twitter and .email values. Then hide the originals. If the width changes, re-evaluate the current width and then change the visibility accordingly.

Answer 2

Why to use jQuery when you can use a simple css rule for this, note that you can achieve that just adding this to your css file:

@media screen and (max-width: 959px) {
    .twitter,.email{
        display: none;
    }
}

Instead of remove and append the content, you can hide it or show it depending on the screen size.