使用 Bourbon Neat 中的班次重新排序列答案

【问题标题】：Re-Ordering columns using shifts in Bourbon Neat使用 Bourbon Neat 中的班次重新排序列
【发布时间】：2015-06-09 19:12:26
【问题描述】：

我可以使用shift(+2) 重新排序内容。但是如果我必须将列向下放置到第二行，我将无法重新排序...... 这就是我正在做的......

左右 2 列，并在移动视图中使用移位，我从右到左和从左到右进行操作，但是当 我进行移位时，它们会像 margin-left:100% 一样离开屏幕，不会排在第二位行.. 我怎样才能做到这一点？谢谢。

这里是代码

html

    <div class="mainContainer redbordered">

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

还有萨斯

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

}

谢谢..

【问题讨论】：

标签： css responsive-design sass neat

【解决方案1】：

移动带有@include span-columns(10 of 10) 的东西实际上没有意义，因为移动只在一行内有效。

如果我正确理解了您的示例，则您实际上不需要轮班。您也可以在移动设备上删除@include span-columns(10 of 10)，因为元素会在那里自然折叠。然后，您只需将列大小（10 个中的 5 个）设置为更宽断点（平板电脑、台式机等）上的两个元素，您应该会获得所需的行为。

这是一个非常简单的codepen example。您可以忽略大部分 CSS，因为它只是复制粘贴的 Neat，我编写的样式从第 539 行开始。尝试调整它的大小，看看这是否是您想要实现的目标。

【讨论】：