How to render a grid element in front or behind an overlapping sibling element using Singularity GS - singularitygs

Question

Is it possible to specify an overlapping grid element to be rendered in front or behind its siblings?
My code below will render the .l-branding div behind the .l-header. I need .l-branding before .l-header in the source order so it renders above .l-header (slideshow) on mobiles.
HTML:
<div class="l-container">
<div class="l-branding">
<!-- logo -->
</div>
<div class="l-header">
<!-- image slider -->
</div><!-- end .l-header -->
<navigation class="l-navigation" role="navigation">
<!-- navigation -->
</navigation>
</div><!-- end .l-container -->
SCSS:
I can use position:absolute; and z-index:10 for the $tab & $desk breakpoints but would like to know if there is a better way.
///////////////////////////////////////////////////////////
//
// HEADER
//
///////////////////////////////////////////////////////////
.l-header-wrap {
#include clearfix;
}
.l-header {
#include grid-span(4,1);
#include breakpoint($tab) {
#include grid-span(12,1);
min-height:$vert-spacing-unit * 5;
}
#include breakpoint($desk) {
#include grid-span(18,1);
}
}
///////////////////////////////////////////////////////////
//// BRANDING
///////////////////////////////////////////////////////////
.l-branding {
#include grid-span(4,1);
#include breakpoint($tab) {
#include grid-span(11,1);
//position: absolute;
//top:1em;
}
#include breakpoint($desk) {
#include grid-span(17,1);
}
}
///////////////////////////////////////////////////////////
//// NAV
///////////////////////////////////////////////////////////
.l-navigation {
#include grid-span(4,1);
#include grid-background;
#include breakpoint($tab) {
#include grid-span(12,1);
//margin-top:-100px;
//position: absolute;
//bottom:0;
}
#include breakpoint($desk) {
#include grid-span(18,1);
//margin-top:-100px;
}
}

Answer 1

You cannot do this with singularity per se, but it can be done with normal CSS. The answer is what you've already done, absolute positioning and z-index. A quick preview of what it would look like is here on CodePen.
I'm not entirely sure if even Flexbox will solve this issue, I believe this is something that just needs to be solved using position and z-index as that's what you're asking to do.