Flexbox Question: How do I re-order this flexbox?

[FFRedshirt]

I’m new to flexbox so I’ve been testing on codepen. I’m close but not there yet.

I have a 2 column flexbox with 2 boxes on the left and 1 box on the right.

On mobile I want it to stack and I want the right box to wedge in between the left two boxes.

Here is where I am:

http://codepen.io/ants/pen/rLYVPa

I just cant get the blue box in between the red and green boxes.

Thanks guys!

FF

[Atelierbram]

Can be done, but you will need a browser with support for display: contents;, which is I think only latest versions of Firefox at the moment.

So this fork of your demo works in Firefox, because in the mediaquery there is:

@media (min-width: 1000px) {

 .rowParent{
  flex-direction: column;
}

 .flexChild2 { 
   width: 100%; 
   display: contents;
  } 

} 

The spec on display: contents:

“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”

[FFRedshirt]

Hrmm is there anyway that the rest of the browsers would support?

[Atelierbram]

Reordering the HTML-markup, get rid of .flexChild2 and then some negative margin-top, but this feels very hacky.

http://codepen.io/atelierbram/pen/pbdyxr/

[FFRedshirt]

It definitely works though! I am surprised I am struggling with flexbox as much as I am. I need to study up on them more. I’ve been living in IE8 min requirement world for so long and now I’m being allowed to play with Flexbox finally.

I’ll roll with this solution Bram! Thanks!

[FFRedshirt]

Oh I see what you did. So this forces a specifically required margin top. So actually this method wont work. I tried adding content to it and 3 breaks down.

http://codepen.io/ants/pen/PzOKvm

[Atelierbram]

Yeah I know, you’ll be in magic numbers land. Really display: contents would be exactly what you need here, shame it isn’t implemented yet across browsers. The new CSS Grid Layout could help you out as well, but is also future-music too-early-days.

[Author]

Posts