Переупорядочивание столбцов с использованием сдвигов в Bourbon Neat

Question

Я могу изменить порядок использования контента с помощью shift(+2). Но я не могу изменить порядок, если мне нужно поместить столбец во второй ряд ... Вот что я делаю ...

2 столбца влево и вправо, а также смены в мобильном режиме i do right to left и слева направо, но когда я делаю смены, они уходят с экрана, как маржа слева: 100% не заставит его прийти ко второму ряду. Как я могу это достичь? спасибо.

здесь код

HTML

<div class="mainContainer redbordered"> 

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

И 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) 
    } 

} 

Спасибо ..

Answer 1

Shifting то, что имеет @include span-columns(10 of 10) на нем не имеет смысла, поскольку сдвиг работает только в одной строке.

Если я правильно понимаю ваш пример, вам не нужны сдвиги. Вы также можете удалить @include span-columns(10 of 10) на мобильном телефоне, так как элементы там будут разваливаться. Затем вы просто устанавливаете размеры столбцов (5 из 10) для обоих элементов в более широких точках останова (планшет, рабочий стол и т. Д.), И вы должны получить желаемое поведение.

Вот очень простой codepen example. Вы можете игнорировать большую часть CSS, поскольку он просто скопирован в Neat, стиль, который я написал, начинается в строке 539. Попробуйте изменить его размер, чтобы убедиться, что это то, чего вы пытаетесь достичь.