[feature request] Content reordering

[maxxst]

I would love to see your solution for that :D

[philipwalton]

Yeah, I thought about this as a demo at one point. I do showcase content reordering in the "Holy Grail" example, but I guess I don't talk about it very much. I also don't end up needing to do this very often in real projects.

The only time it's ever been useful for me is to easily get tab ordering to go to the content area before the navigation area, but I'm not sure if I could make a whole demo about that.

Anyway, I'll think about it a bit more and update your here on what I decide. Let me know if you have any more thoughts.

[maxxst]

I had it in a specific case where I wanted to have the download buttons on the very top when you are on a phone and under the gallery when you have more space .. somehow I didn't get it to work .. so I thought maybe a specific demonstration would help :)

[dajare]

@philipwalton - One thought: for the "Holy Grail", how would you get both .HolyGrail-nav and .HolyGrail-ads to appear below the main content in the "mobile" view? I tried a couple solutions to do with order:, but failed miserably. 😕

(Rationale: it seems there is a de facto "standard" emerging that mobile views expect content first, nav at the bottom.)

Thanks!

[philipwalton]

@dajare since the content is already first in the source, the way to get it to appear first on mobile is to just remove all order declarations.

Also, can you point me to some examples of this emerging standard? It seems to me that primary navigation is still usually at the top.

[dajare]

@philipwalton

Also, can you point me to some examples of this emerging standard? It seems to me that primary navigation is still usually at the top.

I should have styled my "Rationale: it seems there is..." more like: "Rationale: it _seems_ there is..."! But having said that, I think I might have picked up this idea from a tuts+ tutorial that referenced other articles, in particular, Luke Wroblewski (this recent video provides analysis and explanation). "Content first, nav second" features at various points in the Brad Frost article. It also seems to be implied in some of the navigation threads on UX.StackExchange (one example).

This is highly impressionistic on my part, and perhaps I've got the wrong end of the stick (or screen, as the case may be). But that's what prompted my comment.

Thanks (once again! you gave me some flex-related "sticky footer" tips on Twitter) for your help.

[knpwrs]

Not really sure if this is the right use for it, but I recently had code like the following:

<header>
  <h1>Logo</h1>
  <button>Foo</button>
  <button>Bar</button>
</header>

I used order so that it would appear button, button, h1. It made sense to me because, in my head, h1 should semantically (and for screen readers) come first but visually I wanted it to come last.

[dajare]

Quoting Phil Walton:

... the way to get it to appear first on mobile is to just remove all order declarations.

As it happens, not quite all order declarations. It seems Safari still doesn't play nice, so I needed to do it this way (showing commented-out bits for clarity):

.HolyGrail-nav{
    -webkit-box-ordinal-group:0;
    -webkit-order:-1;
/*    -moz-box-ordinal-group:0;
    -ms-flex-order:-1;
    order:-1 */
}

And that did the trick. I get the "nav" column on the left in wide view, and at the bottom in "mobile" view. (In case anyone is interested.)