insert a div into header based on screen size?

Question

I have a div that works with a shopping cart plugin that displays the cart in the sidebar.

The website I am building is responsive and In the designs the "Items" div gets moved into the header of the site when the screen size is below 1024px

I tried just hiding and showing the divs with media queries but they both have the same ID, so what I would like to do is say at 1024 have "Items" in the sidebar and if the screen is resized below that, remove "Items" from the sidebar and add it to the header.

Is this possible?

Sorry if this seems like an easy fix,

Answer 1

Perhaps something like this (untested, but should give you a general idea of an approach). Basically, it will check on resize for the windows size. If its less than 1024 the #items div will be removed and appended to the #header. Else, it will be re-appended to the #sidebar, assuming it was already appended to the header.

    function itemsToHeader(){


        $items = $('#items');

        if( $(window).innerheight() < 1024 ){

            if( $('#header').find('#items').length <= 0 ){
                $items.remove().appendTo('#header');
            }

        }else{
            if( $('#header').find('#items').length > 0 ){
                $items.remove().appendTo('#sideBar');
            }
        }

    }

    $(window).on('resize', function(){

        itemsToHeader();

    });

    itemsToHeader();