First the background of the problem.
I have a site with lots of pages with lots of articles of varying lengths. I illustrate the articles with pictures. I have two classes for pictures, one for big pictures that are centred almost full width and another for small pictures that are floated right. To appear in context I want a small floated picture to appear alongside the paragraph which mentions the subject of the picture. I therefore place the <figure> element with the class .smallpic before the relevant paragraph and it all works nicely.
Now, when I go responsive and the text beside the picture gets too narrow, I add a break to lose the float and centre the image, and that works.
Here is the bit I don’t like, the order. In the narrow view we see the elements in their true html order, with the picture before the relevant paragraph. When floated right, it appears to be after the paragraph, which is where I would like it to appear. This was something I never could solve and would have to live with it, the float must come first to appear next to the paragraph.
Then enter Flexbox, it can re-order elements within it. I did a quick experiment to see if I could make this work and in this simple test it did.
Here I have a few sections with headers and paragraphs. On the section about bees, I have a photo of a bee that floats nicely next to the paragraph in the wide view. In the narrow view it centres below the paragraph with the help of flex. Normally it would have appeared between the heading and the paragraph like the fish one, which looks awful IMO.
But…
In real life, my articles are not like this, each section is not just one paragraph there may be several. A paragraph with a picture may not be the first or last one in the section.
In this more realistic example, the section is about insects and only the second (middle) paragraph mentions bees. Using the same method puts the image at the very end of the section, detaching it from its paragraph.
So, how do we make the image display after the paragraph that follows it?
I’m thinking I would need to add classes to each element in the section to define its order in the flex (yet to try this). Or does someone have a smarter suggestion?
Setting order classes does work. But is that the best way?
In my eyes, that’s the best way (and the most appropriate use of flexbox.)
That’s good to know.
Though I was sort of hoping you were going to show me some clever css magic I didn’t know about that would automate it somehow.
Perhaps I could avoid having to label every element in the section with a class by grouping just the paragraph and its picture in a generic <div> with a flex class. Good idea?
But then with the method above I don’t have to set the earlier ones to .ord1 as order 1 is the default, right? I’m just thinking of very long sections with lots of paragraphs or lots of pictures where it may get tedious or complicated.
I mean to keep a paragraph associated with the figure, couldn’t you just nest the figure inside the paragraph element (whatever paragraph it’s relevant to?)
Perhaps wrap the actual text in a span or something if you want left/right columns?
If no order is specified, it defaults to the source order. So it’s however you do your source.
Never thought of putting the <figure> in the <p>, wasn’t sure if that was semantically or structurally correct, but if you say so.
I’m just throwing ideas out there. Try it out and see what happens.
Putting <figure> in the <p> does not work, because they are now parent and child, not siblings in the flex container. It would need the like you mentioned.
Why does this not work?
I’ll try with the <div> wrap like I said before.
That nailed it.
Further explanation is needed 
. Are you wondering about the source ordering?
Yes; change it to a div. I was just about to post that. The <figure> element can’t be inside of a <p> apparently. Checking “inspect element” showed it broken (the parent/children nesting of p/figure).
The photo stays before the paragraph.
I had a feeling that the validator might cough at that. I’m trusting your word too much 
That’s me done for this evening, catch you later.
At least the idea / theory was there . I didn’t even think about validity of figure inside of p. As said, I just threw ideas out. Good job with the div idea. Beat me to it.
Catch you on the flip side 
I can’t blame you. HTML5 is so “loose” I’m surprised it has any rules
It doesn’t. The first thing they did was to abandon the standards for how markup languages should work that HTML 2 through HTML 4 all followed.
Now the tests work, I’m now going through my pages adding this to a real working site where needed.
About the prefixes, I have prefixes for the main container display. Are there any additional ones for the other properties?
This is what I have:-
.flexpic {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.flexpic figure {
order: 2;
}
You can add in other prefixes if you want. Just because of how “new” flex is, I add prefixes everywhere possible just to get the most out of older browsers.
Check here - http://ptb2.me/flexbox/ .
I’m no expert with this, but won’t
display: -webkit-flex;
over-write the preceding
display: -webkit-box;
That’s the point. -webkit-box is an older version of its implementation of flexbox. Newer webkits implemented -webkit-flex due to change in syntax (multiple versions of flexbox syntax were proposed (2009, 2011, etc) so -webkit-flex was made. Then, that was made into just display:flex;.
The point is that really old webkit can get -webkit-box, while “newer” but old webkit gets -webkit-box. Modern browsers get display:flex.