Responsive multi column list

Question

Say I have a list, which, on mobile, is arranged like this:

A
B
C
D
E
F

On desktop, I want them to arrange like this:

A   D
B   E
C   F

I tried using a flexbox but I get this:

A   B
C   D
E   F

What is the best way to achieve this responsive reflow?

Possible solution here: https://stackoverflow.com/a/42613421/5641669 (plus an according media query with a different `column-count` setting) — Johannes, Aug 31 '22 at 22:56
Show us some code, what you have tried. At the minimum your mark up. Make it as easy as possible for us to help you. — Jon P, Aug 31 '22 at 23:21

score 3 · Accepted Answer · answered Aug 31 '22 at 23:02

Here you go

.container {
      column-count: 2;
    }

    @media only screen and (max-width: 400px) {
      .container {
        column-count: 1;
      }
    }

<div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
</div>

1 Answers1