Reordering of elements

Hello!

The best solution I’ve found in situations like this is to simply duplicate the sidebar and use two versions of it in the HTML, one for desktop and the other for mobile:

-You could leave the first version where it currently is, and make that visible only on desktop, but hide it on mobile.

-For the second version, you could place it so that it appears correctly after the description, and hide it on desktop, but make it visible in mobile.

If you are able to modify the CSS, you can target each version of the HTML accordingly using media queries:

.desktop-sidebar {
   display:  block;
}
.mobile-sidebar {
   display:  none;
}

@media (max-width: 700px) {
   .desktop-sidebar {
      display:  none;
   }
   .mobile-sidebar {
      display:  block;
   }
}

For the order property to work, the elements in question need to be siblings in a container with the display: flex or display: grid, which means you would need to restructure the HTML to achieve that.

Here’s an example of the order property in action.

HTML

<div class="container">
    <div class="first-element">
        <h1>First Element</h1>
    </div>
    <div class="second-element">
        <h1>Second Element</h1>
    </div>
</div>

CSS

.container {
    display:  flex;
}

.first-element {
    order:  0;
}

.second-element {
    order:  1;
}

@media (max-width: 700px) {
    .first-element {
        order:  1;
    }

    .second-element {
        order:  0;
    }
}

• This reply was modified 1 year ago by Artemio Morales. Reason: Code was not formatted properly
• This reply was modified 1 year ago by Artemio Morales.