Singularitygs 如何使用Singularity GS在重叠兄弟元素的前面或后面渲染网格元素

是否可以指定要在其同级前面或后面渲染的重叠栅格元素

下面的代码将在

.l-header

后面呈现

.l-branding

div。我需要在

.l-header

之前以源代码顺序执行

.l-branding

，以便在手机上呈现上面的

.l-header

（幻灯片）

HTML:

---

你不能用奇点本身做到这一点，但它可以用普通的CSS做到。答案是你已经做过的，绝对定位和z索引。快速预览它的外观

我不完全确定Flexbox是否能解决这个问题，我相信这只是需要使用位置和z-index来解决的问题，因为这就是你要做的

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

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