On Sat, Mar 2, 2019 at 4:55 AM Tom Livingston <tom...@gmail.com> wrote:
>
> Hello listers,
>
> Is it possible to do the following with flexbox?
>
> mobile (just a stack, no flex yet):
> 1
> 2
> 3
>
> desktop (two-column with different order):
> 2 1
> 3
>
> Struggling with this...
> TIA
@media (min-width: 800px) {
.container {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.container > div {
flex-basis: 50%;
flex-grow: 0;
}
.container > div:first-child { order: 2; }
.container > div:nth-child(2) { order: 1; }
.container > div:nth-child(3) { order: 3; }
}
flex-wrap allows it to go to the next line after the second block
(first one in source) is displayed.
justtify-content: flex-end pushes the last element displayed to the
right-hand side.
flex-basis: 50% is a suggestion for how large we'd like the element to
be. 50% makes it wrap after the 2nd element is displayed.
flex-grow: 0 prevents the last element from stretching to the full width.
The order numbers should be self-explanatory. The elements will be
shown in the order of their numbers, but they don't need to be
sequential or even all different. The default is 0 and if two are the
same they'll be displayed in source order.
If you'd like to see this: https://codepen.io/VAggrippino/pen/YgGdBd
______________________________________________________________________
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/
