0

I've run into a problem of how I should code some columns of content.

Problem

This is what is being output for the state of large-4; three columns with different sized boxes inside.

enter image description here

But what happens when I have medium-6 and the responsive mode kicks in? I get this:

enter image description here

You might understand my dilemma here. I want the content to evenly distribute between the, now, two columns, and not ending up with a "row" and then having the green column under the purple, but rather the teal one under the purple and somehow evenly put its boxes, if possible, over two columns.

Since the boxes inside the columns are sorted by date, the order has to be as they are in the large-4 picture (i.e. first date at the top left, going down, moving to the next column to the right, starting from the top, and so on).

My tries to solve this

I thought that Foundation 6 with the flex grid could possibly help me out, but I have yet to find anything.

I also gave the thought and try of using CSS3 column, but the break my boxes in half and make it really hard to manipulate.

If my request isn't clear enough, please let me know and I'll try to be more specific.

Thanks in advance!

Community
  • 1
  • 1
Erik Blomqvist
  • 471
  • 1
  • 4
  • 16

0 Answers0