Move HTML Elements to any location at any breakpoint.
(mobile, tablet, desktop etc)
Take full control of content placement in your responsive website.
No more double content for hiding / showing in different resolutions.
No more telling your designer “that won’t work”.
Lightweight, easy-to-use.
HTML Elements can be moved by simply adding tags inline:
- data-moveTo=”#target_id” (css selector .classes works also)
- data-breakpoint=”1024” (At what resolution to move)
- data-moveType=”append” (append, prepend, after, before)
Example:
<div data-moveTo="#target_id" data-breakpoint="1024" data-moveType="after">
This div will be moved at breakpoint 1024 and placed after element with ID "target_id".
</div>
All attributes support multiple values for moving same element more then once at different breakpoints.
Move objects using jQuery/Javascript
<script type="text/javascript">
$(document).ready(function() {
$(".class_of_object_to_move").responsiveMove({
target: ".class_of_target_object",
breakpoint: "1024",
moveType: "after" // possible values: after, prepend, append
});
});
</script>