Hiiiiii :) On Mon, 24 Aug 2020, 4:21 pm Tom Livingston, <tom...@gmail.com> wrote:
> 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/ ______________________________________________________________________ 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/
