← Back to Documentation

Documentation

Component: Dynamic Adapt Move elements across the DOM based on breakpoint

When building responsive layouts, sometimes you don’t just change styles — you need to change the order or even the position of elements in the HTML structure. Dynamic Adapt moves an element to another container at a specified screen width, and automatically returns it back when the screen becomes wider again.

Download Animmaster Vite Template Save your time — start now

What Dynamic Adapt solves

In many cases, responsive design is not only about changing paddings or font sizes. Sometimes a block must appear in a totally different place in the markup on mobile: for example, moving a button into the header, placing a sidebar under content, or re-ordering cards for better UX.

Key behavior
At the given breakpoint, the element is moved to a new container (the HTML structure actually changes). When the screen grows wider again, the element is returned to its original place.

How to use

Add the attribute data-anim-dynamic to the element you want to move. JS is connected automatically when the attribute is present (you can use the da snippet if you have it).

Attribute format
data-anim-dynamic="targetSelector, breakpoint, position, parentSelector"
  • targetSelector — (required) selector of the container to move into.
  • breakpoint — (required, default 767.98) screen width where move happens.
  • position — (default 0) index among existing children in the target container.
  • parentSelector — optional “scope” selector. If provided, the system searches for the target inside this parent.
Defaults
If you omit optional values, the system uses 767.98 as the breakpoint and 0 as the position.

Examples

Move a button into .header__actions on mobile:

HTML

<button
	class="hero__cta"
	data-anim-dynamic=".header__actions, 767.98, 0"
>
	Get started
</button>

Move a sidebar under content at 991.98 and place it after the first child:

HTML

<aside
	class="layout__sidebar"
	data-anim-dynamic=".layout__content, 991.98, 1"
>
	...
</aside>

Use a parent selector to disambiguate the target (useful if the same selector appears multiple times on the page):

HTML

<div
	class="card__meta"
	data-anim-dynamic=".card__footer, 767.98, 0, .card"
>
	...
</div>

Practical tips

Prefer stable selectors

Use unique, predictable selectors for targets (BEM-style containers are perfect). Avoid selectors that might change (like :nth-child or deeply nested chains).

Think about accessibility

Moving elements changes DOM order, which affects keyboard navigation and screen readers. Make sure the new order still makes sense.

Use “position” intentionally

Position 0 means “first in target”. If you need it after an existing block, use 1, 2, etc.

Download

Build responsive layouts faster: move blocks where they belong without rewriting markup for each breakpoint. Download the template and use Dynamic Adapt out of the box.

Download Animmaster Vite Template Save your time — start now