Thanks so much Dave. I'll definitely give this a try when I start the project!
On Mon, Aug 24, 2020 at 10:55 AM Dave Chiu <chiu.dave+c...@gmail.com> wrote: > > 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/ -- 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/
