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

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.