CODEWITHSUNDEEP
javascripthtmlcssresponsive-design
Some Guy
Some Guy

Reputation: 13568

In HTML, how can I make two columns merge together into one for mobile screens?

I have a website that has two columns of divs with things the user might want to read. They are not guaranteed to be the same vertical height.

When the website is viewed on a small browser or mobile device, I want the two columns to merge into one column, where the items interleave amongst one another.

For instance, normally:

[A1]  [B1
[A2    B1]
 A2]  [B2
[A3]   B2]
[A4]  [B3]

On mobile:

[A1]
[B1
 B1]
[A2
 A2]
[B2
 B2]
[A3]
[B3]
[A4]

Is there a good CSS way to do this with responsive designs? I am using a responsive stylesheet like Pure or Gumby. Or do I have to use JS, in which case, any recommendations for how best to do it with JS?

Upvotes: 0

Views: 1374

Answers (2)

user2701647
user2701647

Reputation:

You'd have to watch for browser compatibility issues, but you could use the new CSS3 column-count.

Here is an example... http://jsbin.com/dipafa/1/edit

More references... http://www.w3schools.com/css/css3_multiple_columns.asp

Upvotes: 0

Andrew Ice
Andrew Ice

Reputation: 841

There's no real 'fluid' way to do what you're doing. But I guess in a sense, each one could have it's own class. And you float them left or right. (Wherever they need to be.) Since the pattern is mostly Left Right Down Right Left, Down, Left Right...Repeat.

And then when you need the columns combined you could set their width to 100% or display block.

(Seperated this into two columns. But look at it as if it were the same list.)

http://jsfiddle.net/uemu68v6/

.side-by-side li{width: 50%;display: inline-block;}
.side-by-side .l{float: left;}
.side-by-side .r{float: right;}

.block li{width: 100%;display: block;}
.block{border-top: 1px solid black; margin-top: 25px;padding-top: 25px;clear: both;}

Upvotes: 1

Related Questions