Hi David, Thanks - that's an interesting solution - I would never have thought of using table-caption for this! For the moment, I ended up using flexbox - only on mobile so IE9 didn't really matter. It seems good, but may have issues on older androids (before 4.4) - if that turns out to be a problem for us - I'll give this a shot.
Sara On Feb 18, 2015, at 3:01 PM, David Hucklesby <huckle...@gmail.com> wrote: > On 2/17/15 4:50 PM, Sara Haradhvala wrote: >> doesn't that require the sidebar div to come first in the HTML? If so, >> then on mobile, it will also come first. Or is there another option? >> -- >> Sara Haradhvala >> Manager, Harlen Web Consulting LLC >> s...@harlenweb.com >> >> >> >> On Feb 17, 2015, at 6:43 PM, David Hucklesby <huckle...@gmail.com> wrote: >> >>> On 2/17/15 1:54 PM, Sara Haradhvala wrote: >>>> Am wondering - is it possible to have a responsive layout that has a main >>>> column and an optional sidebar where text from the main column flows under >>>> the sidebar - but where the sidebar drops under the main column in mobile >>>> view? Not using flexbox (need to support IE8 and IE9). Is JS necessary? >>>> >>> >>> Float the sidebar and give it a percent width, with that width set to 100% >>> on >>> narrow windows (via media query) perhaps? >>> > > You are right of course. To move the sidebar below the main content on narrow > screens, see if this code works for you: > > <http://codepen.io/hucklesby/pen/VYXWmM> > > -- > Cordially, > David > ______________________________________________________________________ > css-discuss [css-d@lists.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@lists.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/
