Front.id

I present to you DOMElementRelocation. This is a plugin created to help front-end (like us) to relocate DOM elements to a new position based on the current breakpoint.

Use case

Lets suppose you have a search form at the header of a web page. Now suppose the mobile design requires this form at the sidebar above the search filters...

The problem on this case is the header and the sidebar are not sharing the scope. You can't just tell via CSS "move the search box from header to the sidebar"

So here comes DOMElementRelocation in. This plugin allows you to accomplish this via js. The elements can be moved from its original location and come back to the original place when its needed. 

Usage

<script src="js/jquery.js"></script>
<script src="/js/mediaQueryEvents.jquery.js"></script>
<script src="../dist/DOMElementRelocation.js"></script>

$(function () {

  new DOMElementRelocation(
    {
      // Define the breakpoints. there is no limit 
      // and name them as you want.
      breakpoints: {
        desk: '(min-width: 1230px)',
        mob: '(min-width: 0px) and (max-width: 1229px)'
      },
      // Declare as many elements you want.
      elements: [
        {
          // The element.
          element: '.search-form',
          // Move to the footer when "mob" breakpoint gets reached.
          mob: '.sidebar',
          // keep the original position.
          desk: false
        }
      ]
    });

});

On this example (assuming the .search-form is located at the header), the element will be moved to the sidebar when the browser size is less than 1229px and will keep it's original position when reach desktop.

For further info please see https://github.com/frontid/DOMElementRelocation