Gotcha, Take a look at this "CSS masonry with flexbox; :nth-child(), and order":
https://tobiasahlin.com/blog/masonry-with-css/ here's a trimmed down version of that for your specific case https://codepen.io/davechiu/pen/966023cd09ef54a5b6795a24d4a610e3 Dave On Mon, Aug 24, 2020 at 9:59 PM Tom Livingston <tom...@gmail.com> wrote: > This is close, thanks. Unfortunately, the designer has "2" on desktop > being on its own in the right column, nothing else spanning into the > right column. So: > > mobile: > 1 > 2 > 3 > > Desktop: > > 1 2 > 3 2 > > > > > On Sat, Aug 22, 2020 at 8:55 AM Dave Chiu <chiu.dave+c...@gmail.com> > wrote: > > > > Hi Tom, > > > > Is this what you're looking for? > > > > https://codepen.io/davechiu/pen/dc927b317e97def3db26c705de4437cf > > > > Dave > > > > On Sat, Aug 22, 2020 at 5:12 AM Tom Livingston <tom...@gmail.com> wrote: > >> > >> Listers, > >> > >> Is it possible to do the following with flex? > >> > >> mobile widths: > >> 1 > >> 2 > >> 3 > >> where all main sections stack, and then... > >> > >> desktop widths: > >> 1 2 > >> 3 > >> where section 2 becomes the right col of a 2-column layout. > >> > >> I can envision 2 and 3 being wrapped, breaking them into 2-columns and > >> then giving 2 a heavy negative top-margin, but am I missing a better > >> way with flex? Also, I'd like to avoid grid. > >> > >> Thanks for looking! > >> > >> -- > >> > >> Tom Livingston | Senior Front End Developer | Media Logic | > >> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > >> > >> > >> #663399 > >> ______________________________________________________________________ > >> css-discuss [css-d@css-discuss.org] > >> http://www.css-discuss.org/mailman/listinfo/css-d > >> List wiki/FAQ -- http://css-discuss.incutio.com/ > >> List policies -- http://css-discuss.org/policies.html > >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > > -- > > Tom Livingston | Senior Front End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > > > #663399 > ______________________________________________________________________ > css-discuss [css-d@css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [css-d@css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
