I am working on an interface for a Raspberry Pi based embedded device. The interface is built with Bootstrap 4 and is currently centered around a .navbar at the top and a .row > .col structure with just two columns within the row. Within each column there are multiple cards. Depending on the user actions and enabled features, there are one or two cards that won't be rendered and the others can change in height.

My current issue is that upon a specific user action, a new card will be added to the first column thus pushing the other cards down the page and some out of view. When this happens, I want one or two of those "out-of-view" cards to then instead show up in the second column.

I can't seem to figure out a good solution to this problem. I want to keep the two columns (at least in visuals) and dynamically assign the various card elements to one column or the other.

• If I leave the current structure of .row > .col then each of the card elements are static within each column via the HTML thus short of putting the card in the DOM twice and hiding one or the other, I need a different solution.
• If I rebuild the page to use flex-box instead and rely on wrapping, I run into issues where one card will be larger than the other within the row causing a bunch of empty space to show up. That is before I even try changing the order of each card. On to the next solution.
• Trying the grid system, I can get something close to what I am looking for but it isn't perfect. The cards move from one column to the next by adjusting grid-template-areas. Since there are cards of different heights (and can change during use), I have some cards spanning multiple rows so there isn't any empty vertical space between cards in a given column or vertical growth to any cards beyond its internal content. This works fine for one given combination of card order and heights, but doesn't for others; I run into the same problem as with the flex-box with empty space within one column for a given row.

I want this to be mainly HTML and CSS driven in order to keep the javascript to a minimum. I figure that I would add some functions to call when various user actions happen (such as with changing the grid-template-areas), it is just a matter of figuring out what HTML and CSS combo to use before writing the necessary JS.

Is there something I am missing with the solutions I have tried so far? Is there other solutions I have overlooked? Do I just need to use JS to essentially "cut" the entire card HTML code block from one column and "paste" it into the other column? Any insight or direction to another solution I can look into is appreciated!

Here are some visuals:

Initial layout:

After that, the user could cause card 2 to pop up which pushes card 3 and 4 out of view:

When that happens, I want card 4 to show up in the second column:

When using the grid system, due to how the various cards can change in height, I have not been able to find a way to size the rows dynamically enough to correct these anomalies (growth if the height is not capped, or empty space if it is):