Lightweight simple Jquery utility to enable faster development of moveable elements based on media breakpoints.

Dependencies: enquire.js jquery

How to:

Add jquery Add enquire.js Add mover.js <script src="Scripts/mover.js"></script>

Add the class "to-move" to all elements you want moved

Add data tag 'data-move-[inser min screen width here]'="[enter div placeholder ID here]" for each breakpoint needed.

(example: data-move-786="content1" will move this element to element 'content1' when the screen / device width is greater than 786)

DONE!

div data-move-1024="content3" data-move-786="header" data-move-480="content5" data-move-0="content1" class="to-move">Hi</div

div data-move-1024="content4" data-move-786="footer" data-move-480="content6" data-move-0="content2" class="to-move">Bye</div

<div ID="header"></div>
<div ID="footer"></div>
<div ID="content1"></div>
<div ID="content2"></div>
<div ID="content3"></div>
<div ID="content4"></div>
<div ID="content5"></div>
<div ID="content6"></div>

Breakpoints can be adjusted in the mover.js very easily.