Как визуализировать элемент сетки перед или за перекрывающимся элементом брата с помощью Singularity GS

Question

Можно ли указать перекрывающийся элемент сетки, который будет отображаться спереди или сзади его братьев и сестер?

Мой код ниже будет отображать .l-branding Див позади .l-header, я нуждаюсь .l-branding до .l-header в исходном порядке, так что он делает выше .l-header (слайд-шоу) на мобильные телефоны.

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: я могу использовать position:absolute; а также z-index:10 для $tab & $desk точки останова, но хотелось бы знать, если есть лучший способ.

///////////////////////////////////////////////////////////
//
// 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

Вы не можете сделать это с особенностью как таковой, но это может быть сделано с обычным CSS. Ответ - то, что вы уже сделали, абсолютное позиционирование и z-index, Быстрый предварительный просмотр того, как это будет выглядеть, находится здесь на CodePen.

Я не совсем уверен, что даже Flexbox решит эту проблему, я считаю, что это то, что нужно решить, используя позицию и z-index, как вы и просили.