Yes Chef Studio

Move elements at different breakpoints

A useful javascript snippet that lets you move elements to a new location at different breakpoints. Perfect if you can only have 1 instance of an element on the page but it needs to change position.


This code is used to append items to different divs at different breakpoints.
It allows us to be more consistent with the development and align it to the design
without back and forth from designers.

function swap(breakpoint, element, location) {
    if (window.innerWidth < breakpoint) {
        // Append 'location' to 'element' if the current window width is less than 'breakpoint'
    } else {
        // Log an error if 'element' or 'location' are not valid HTMLElements
        console.error('Invalid element or location');