0

I see a lot of people talking about this, but no correct answers. To achieve this responsive layout, where box4 tucks up under box2 instead of aligning with the top of box 3:

single column for mobile 2 column for desktop

  <div id="container">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
    <div id="box4">4</div>
  </div>

Multi-column layout insists on putting boxes 1 and 2 in the first column and 3 and 4 in the second column, instead of the preferred order (as in Jhey Tompkins' often-linked Medium post); and

Flex insists on aligning box4 with the top of box3.

So neither one works. I'm pretty sure this isn't impossible. What's the strategy?

Asons
  • 84,923
  • 12
  • 110
  • 165
CaymanCarver
  • 389
  • 3
  • 14
  • I was afraid of this being marked duplicate. NO CORRECT ANSWER HAS BEEN POSTED. The answer given on that other page misunderstand's the OP's intent. Grid only works if the heights of each box are known, which they aren't. – CaymanCarver Nov 17 '17 at 16:59
  • Since questions asking _"What's the strategy"_, is off topic not being specific enough, and as well way too broad, would you rather have it closed as such? ... The dupe answers the question, saying it is **not possible** with CSS alone, which is the CORRECT answer, along with workarounds. – Asons Nov 17 '17 at 18:12

0 Answers0