以CSS的display table堆疊
With responsive design, one of the things that we often want to do is to change the stack order of certain elements, moving the aside on the left below the main text which we want to bring to the top. CSS3‘s Flexbox will do this for us, but there is a quicker, if dirtier, way which we can use now.
I say “use now” when of course we can use Flexbox now but implementations vary across browsers as does the required syntax. Opera’s Chris Mills has written two excellent in-depth articles (Flexbox basics and Advanced cross-browser flexbox) on the different flavours of Flexbox.
Flexbox will of course offer more than simple re-stacking of elements, but if that is all you need, you can look no further thanCSS‘s display property.
(Incidentally this idea is based on something Bruce Lawson told us at beyond tellerand 2012)
Let’s take four boxes whose very simple HTML is laid out as follows:
