Question

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

左右两列，并且在移动视图中使用移位我从右到左，从左到右，但是当我进行移位时，它们会像屏幕左边一样离开屏幕：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

移动有@include span-columns(10 of 10)的东西并没有多大意义，因为移位仅适用于一行。

如果我理解你的例子，你真的不需要轮班。您也可以删除移动设备上的@include span-columns(10 of 10)，因为元素会在那里自然崩溃。然后，您只需将列大小（5个中的10个）设置为更宽的断点（平板电脑，桌面，...）上的两个元素，您就应该获得所需的行为。

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

使用Bourbon Neat中的班次重新订购列

1 个答案: