Re-Ordering columns using shifts in Bourbon Neat

Question

i am able to reorder content using shift(+2). But i am unable to reorder if i have to place column down to second row... Here is what i am doing...

2 columns left and right, and using shifts in mobile view i do right to left and left to right but when i do shifts they go off screen like margin-left:100% will not make it come to second row.. How can i achieve that? thanks.

here is the code

html

    <div class="mainContainer redbordered">

    <div class="leftCont">Left </div>
    <div class="rightCont">Right</div>
</div>

And Sass

    @include media($mobile) { 
        @include span-columns(10 of 10);
         @include shift(+10);



    }

    @include media($tablet) { 
        @include span-columns(5 of 10)
    }

    @include media($laptop) { 
        @include span-columns(5 of 10)
    }

    @include media($large-desktop) { 
        @include span-columns(5 of 10)
    }

}

.rightCont
{
padding:20px;
font-size:22px;

background-color: crimson;

        @include media($mobile) { 
        @include span-columns(10 of 10);
         @include shift(-10);


    }

    @include media($tablet) { 
        @include span-columns(5 of 10)
    }

    @include media($laptop) { 
        @include span-columns(5 of 10)
    }

    @include media($large-desktop) { 
        @include span-columns(5 of 10)
    }

}

Thanks..

score 0 · Answer 1 · answered Apr 07 '15 at 07:46

Shifting something that has @include span-columns(10 of 10) on it doesn't really make sense, as shifting only works inside a single row.

If I understand your example correctly, you don't really need shifts. You can also remove the @include span-columns(10 of 10) on mobile, as elements will collapse naturally there. You then just set column sizes (5 of 10) to both elements on wider breakpoints (tablet, desktop, ...) and you should get the desired behaviour.

Here's a really simple codepen example. You can ignore most of the CSS, as it's just copy-pasted Neat, the styling I wrote starts on line 539. Try resizing it to see if this is what you're trying to achieve.

Re-Ordering columns using shifts in Bourbon Neat

1 Answers1