改变骨架CSS中的断点

Question

我想改变骨架CSS网格中的断点。本质上，我希望当浏览器达到1000px时，右边的列堆叠在左边六列的下面。下面是我正在使用的示例代码:

<section>
    <div clas="container">
        <div class="row">
            <div class="six columns">
                <h2>Lorem Ipsum Dolar</h2>
            </div>
            <div class="five columns offset-by-one">
                This is my fifth column that I want to be positioned under the six columns area when the browser screen hits 1000px. This should be full width as well.
            </div>
        </div>
    </div>
</section>

对如何做到这一点有什么想法吗?或者是否应该设置一个媒体查询，使左边的五列堆栈在前六列下面?

Answer 1

轻松处理媒体查询

.five.columns {
width: 100%;
margin-left: 0px;
}
@media (min-width: 1000px) {
.five.columns {
    width: 39.3%;
}
}

可能需要稍微调整一下，但它可以工作。