Merge the content of two columns when shrunk

250
December 16, 2017, at 11:15 AM

I have two columns of different content side by side each other.

When the screen is shrunk width wise, I want the content inside each to merge and be alternate.

Here is an example :

COLUMN 1 COLUMN 2
.content-1-item -|- .content-2-item
.content-1-item -|- .content-2-item
.content-1-item -|- .content-2-item
.content-1-item -|- .content-2-item

And when the screen is shrunk, I want this result :

ONLY COLUMN
.content-1-item
.content-2-item
.content-1-item
.content-2-item
.content-1-item
.content-2-item
.content-1-item
.content-2-item

Notice how they are alternating items.

1 thing that will NOT work is putting the items into the same container, because I want each column's items to not effect the vertical spacing of the other items.

For instance, If I have to inline-block elements next to each other, and 1 element is 500px tall, and the other is 300px tall, the shorter one will have a space of 200px below it before the next element.

So I need to separate the items into 2 columns.

Rent Charter Buses Company
READ ALSO
Sub menu jumping up once clicked?

Sub menu jumping up once clicked?

We have a oddly coded sub menu that was customized so it could be in a specific column setup, however when you click a link under that sub menu, the sub menu then jumps up while the next page is loadingIt looks pretty bad :P

199
Transforming img - white dots appear on chronium

Transforming img - white dots appear on chronium

I am trying to get 3d transform effect of the bacground image on mouse move

211
'Access-Control-Allow-Origin' header for font files

'Access-Control-Allow-Origin' header for font files

I'm having an issue with loading fonts on a different domainI found an answer: How to add an Access-Control-Allow-Origin header but it's not working for me

268
Keeping Images Centered As New Pictures Are Added with CSS in Ionic Project

Keeping Images Centered As New Pictures Are Added with CSS in Ionic Project

I'm very new to coding and need some help with image alignment using CSSThe program needs to take pictures and each time it takes a picture, a thumbnail of the picture needs to be added in line

170