Respondr Multi-Column Layouts in Mobile vs. Desktop Views

In uPortal, a user has the ability to set tab content in a single or multi-column layout. Portlets can then be dragged and dropped into different locations, whether it is reordering portlets in a single column or rearranging portlets in multiple columns. When viewing this content in mobile view, the responsive UI design collapses multiple-column content into one single column. These portlets are stacked, in order, from top to bottom, left column to right column.

Below are the default views for desktop and mobile. Desktop is using a 2-column layout. Notice how the portlet stack in mobile view, from top to bottom then left column to right column:

A user can drag and drop portlets around on tab content, providing a user-defined experience. If a user is in mobile view and drags portlet 2 above portlet one, the portlets maintain the same column stack when the user logs back into desktop view:

However, this behavior can affect the desktop column layout in unexpected ways. For example, if a user were to log into mobile view and drag portlet 3 above portlet 2, the action would be similar to if the user, in desktop view, had dragged portlet 3 below portlet two. Now in desktop view, three portlets appear in column 1, where as only one portlet (portlet 4) remains in column 2. This behavior will occur anytime a user drags a portlet above the last portlet in the left-most column:

Now if the user logs back into mobile view and decide to drag portlet 4 to the top. In desktop view, portlet 4 is now at the top of column 1, with column 2 empty:

In desktop view, the user can rearrange the portlets by dragging them back into column 2. In order to find a balance between the mobile view and desktop view, it is recommended that portlets arranged in multiple columns on the desktop should be stacked in a way that is easy to navigate as collapsed content in mobile view.