Is this responsive layout possible with flexbox?

Question

I need to achieve the following layouts in CSS:

I've been trying flexbox but cannot get container 'C' to appear correctly on tablet width. I can reorder the columns using CSS order but the width of 'C' spans the full width of the page but it needs to be constrained to the same width as container 'A'.

I've setup a blank starter pen here because I can't post my project: https://codepen.io/ahdigital/pen/GRqpQRL?editors=1100

My question is, will this be possible with flexbox, or should I use another CSS approach? (Trying to avoid JS).

Don't use flexbox because that's not a flexbox layout. Use grid. — Niet the Dark Absol, Oct 13 '20 at 16:33
As Niet mentioned, use grid.. heres a wonderful article on that: https://css-tricks.com/snippets/css/complete-guide-grid/ — Raqha, Oct 13 '20 at 16:35
possible, but with headaches; doesn't worth it; nested flex containers,... — Mechanic, Oct 13 '20 at 16:40

score 4 · Accepted Answer · answered Oct 13 '20 at 16:37

No.

By using nested flexboxes you can achieve a similar layout if the two boxes that align vertically to each other (A and C in this example) in tablet layout are adjacent, but that isn't the case here.

Use Grid to do the layout instead.

With media queries you could use Flexbox for desktop, Grid for tablet, and neither for mobile.

Is this responsive layout possible with flexbox?

1 Answers1