Foundation Flex grid float single element to the left and multiple elements to the right - css

Question

I have following HTML:
<div>
<div class="elemA"></div>
<div class="elemB"></div>
<div class="elemC"></div>
</div>
I would like to achieve following result on medium breakpoint:
Is there any way to position elements like that, without wrapping B and C into additional parent-container?
Such solution is not an option as element A should be positioned in between B and C on small breakpoint:
It can be easily achieved with regular foundation grid by adding float left and float right styles, however it stops working with flex-grid...

Answer 1

Foundation Float grid is not able to do that (and probably no other flex grids do either). They are simply not designed for such usage. Most FE frameworks provide other grids based on Flex and other techniques, which may or may not give a way to do it.
However once your project uses the Flex grid there's little help in that.
A possible solution is to use custom CSS with floats and source ordering. The only issue is for this, if the height of "B" + "C" is less then the height of "A", you have to know/set the height of your "A" div, because the outer one would only grow to fit "B" and "C" and can cause "A" to overflow other elements coming after the outer div.
/* Core of layout */
.wrapper {
position: relative;
}
#media screen and (min-width: 40em) {
.elemB {
width: 50%;
float: right;
}
.elemA {
top: 0;
position: absolute;
width: 50%;
clear: both;
}
.elemC {
width: 50%;
float: right;
clear: both;
}
}
/* If the height of B + C is less than height of A, unfortunatelly we need to know the height of A */
.elemA {
height: 120px; /* must be known */
}
.wrapper {
min-height: 120px; /* this must be set to the same as the height of A :( */
}
/* Nothing important below this line, only appearance for the example */
.wrapper {
background-color: #bbb;
}
.wrapper div {
color: white;
text-align: center;
}
.elemB {
background-color: #3a598e;
height: 20px; /* simulate some content */
}
.elemA {
background-color: #618745;
}
.elemC {
background-color: #515658;
height: 80px; /* simulate some content */
}
<div class="wrapper">
<div class="elemB">B</div>
<div class="elemA">A</div>
<div class="elemC">C</div>
</div>
This will work regardless of your grid.
Indeed it is not ideal if you'd like to use the breakpoints exactly as defined by your grid, but in fact if you compile your CSS files from the Foundation sources, you can use the media query mixins in your Sass.
If you on the other hand use pre-compiled Foundation CSS, than the breakpoints are fixed and you can simply use the same on your custom CSS. For example to use 1 col layout only on small and two columns above, use #media screen and (min-width: 40em) as in my example above. You can find the media queries of the default breakpoints in the last part of this chapter.