Move html elements on resize

Question

I have a list of icons that is positioned in the DOM depending viewport. My script works so far but not on resize. I always have to just press F5 on my keyboard.

What is wrong?

    $(document).ready(function() {
        //
        // functions
        //
        // ----------------------------------------------------------------------------

        // select dom element and move to another 
        // ele = element to move, wrapper = element parant
        var moveEle = function(ele,wrapper) {
            var getContent = $(ele).contents();
            $(getContent).detach().appendTo(wrapper);
        }

        //
        // modernizr
        //
        // ----------------------------------------------------------------------------

        //** viewport check
        $(window).on( "resize", function() {

          var query = Modernizr.mq('(min-width: 992px)');
          if (query) {
                moveEle('.action-icons', '.wrap-action-links');
          } else {
                moveEle('.action-icons', '.quick-links');
          }
        }).resize();

    });

How can I optimize the script?

UPDATE: https://jsfiddle.net/3bhbcw60/2/

Answer 1

You can do this via matchMedia:

if (matchMedia) {
  var mq = window.matchMedia("(min-width: 767px)");
  mq.addListener(cld_mediaquery_changed);
  cld_mediaquery_changed(mq);
}

function cld_mediaquery_changed(mq) {
  if (mq.matches) {
    $('.lorem').detach().appendTo('.box-one')
  } else {
    $('.lorem').detach().appendTo('.box-two')
  }
}