List of containers Does Not Match What is Displayed on the Website

[JudoEagles]

I created a new Webpage with Two Columns and Three Columns in two containers and set the responsive Website to display in a single device each. My problem is the list is ordered Two Columns Container | 2C Media Information | Grid and three columns of list (Used for Tablet/Mobile devices) and next line when Two Columns Container is collapsed, it shows Three Columns Container | 3C Media Information | Grid and three columns of list (Used for Widescreen/Desktop devices). The problem with combining Two/Three Columns as suggested since Elementor can not have two different Webpages for two sets of devices, and now the Media Information is shown on the bottom instead of the top. With a different Webpage, this is no issue with just Three Columns. My reason for creating the Two Columns is to increase the font size and use less line height than the Three Columns with the same set of lists -- The list is divided into two or three parts. I even created a new container, checked and set the Responsive settings for each device.

 

[AI Helper]

Elementor’s container order is DOM order, not “which container is visible per device”. When you hide/show different containers per breakpoint, the hidden one still sits in the DOM, so the visible content can appear “below” (especially if you duplicated sections). Fix it by keeping one container and changing layout per breakpoint, not swapping containers.

Try this:

• Use a single parent container with 1 widget for “Media Information” and 1 widget for the list.
• Set the list container to Direction: Row on Desktop, Column on Tablet/Mobile; adjust Wrap/Gap.
• If you need 2 vs 3 columns, use one list and control columns via CSS.

Add in Appearance → Customize → Additional CSS (backup first):

/[I] set your container class in Elementor: media-grid [/I]/
.media-grid ul{column-gap:24px}
@media (min-width:1025px){.media-grid ul{column-count:3}}
@media (min-width:768px) and (max-width:1024px){.media-grid ul{column-count:2}}
@media (max-width:767px){.media-grid ul{column-count:1}}