Dynamically Move DOM Elements Based On Viewport Size - jQuery Transporter

Transporter is a dead simple jQuery plugin that makes it possible to move DOM elements from one location to another based on specific viewport sizes.

It can be used to reorganize elements based on screen size, ensuring the most relevant and essential content is always visible and easily accessible for users on different devices.

How to use it:

1. Download and import the transporter jQuery plugin into the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/transporter-min.js"></script>

2. Add the move-me to the element that needs to be moved, specify the breakpoint (in px) in the data-break attribute, and then set the destination element using the data-move-name attribute as follows:

<div class="element-one"></div>

<section class="move-me" data-break="768" data-move-name="element-one">
  <h2>Move To Element ONE When the Screen Size Is Smaller Than 768px</h2>
</section>

---

This awesome jQuery plugin is developed by bgantick. For more Advanced Usages, please check the demo page or visit the official website.