How I Fixed My Masonry Layout on Mobile Using window.matchMedia

Have you ever built a nice two-column layout, only to realize it looks broken on mobile? That happened to me. Here's what went wrong and how I fixed it — step by step. The Problem I had a Kudos page — a wall of feedback cards from colleagues. On desktop, I wanted a masonry layout (two columns, cards stacked like bricks). On mobile, just a simple list — one card per row. My first approach: split the cards into two arrays (even/odd) and render them as two columns. const columns = [ kudos . filter (( _ , i ) => i % 2 === 0 ), // left column kudos . filter (( _ , i ) => i % 2 === 1 ), // right column ]; This gives a nice masonry effect: Desktop (md+) ┌─────────┐ ┌─────────┐ │ Card 0 │ │ Card 1 │ │ │ └─────────┘ └─────────┘ ┌─────────┐ ┌─────────┐ │ Card 3 │ │ Card 2 │ │ │ └─────────┘ │ │ └─────────┘ Reading order: 0 → 1 → 2 → 3. Correct! But on mobile, these two column divs stack vertically . So you get: Mobile (broken) ┌─────────┐ │ Card 0 │ ← left column first ├─────────┤ │ Card 2 │ ├───