Question

不确定这是否可行，但我想要将Foundation 5中的以下列编码为崩溃，如下所示。

大
[1] [2] [3] [4]

中
[1] [4]
[2] [3]

小：
[1]
[2]
[3]
[4]

媒介是让我搞砸的断点。

有人可以帮忙吗？

干杯。

Answer 1

这是一个具有挑战性的问题。我认为你有几个选项都使用嵌套。一个人会在medium上找到正确的布局，但不会对small ..

起作用

<div class="row">
    <div class="large-6 medium-6 columns">
        <div class="row">
            <div class="large-6 medium-12 columns">1</div>
            <div class="large-6 medium-12 columns">2</div>
        </div>
    </div>
    <div class="large-6 medium-6 columns">
        <div class="row">
            <div class="large-6 medium-12 large-push-6 columns">4</div>
            <div class="large-6 medium-12 large-pull-6 columns">3</div>
        </div>
    </div>
</div>

另一个选项是复制最后一行并使用可见性类..

<div class="row">
    <div class="large-6 medium-6 columns">
        <div class="row">
            <div class="large-6 medium-12 columns">1</div>
            <div class="large-6 medium-12 columns">2</div>
        </div>
    </div>
    <div class="large-6 medium-6 columns">
        <div class="row show-for-medium-up">
            <div class="large-6 medium-12 large-push-6 columns">4</div>
            <div class="large-6 medium-12 large-pull-6 columns">3</div>
        </div>
        <div class="row show-for-small-only">
            <div class="small-12 large-push-6 columns">3</div>
            <div class="small-12 medium-12 large-pull-6 columns">4</div>
        </div>
    </div>
</div>

演示：http://codeply.com/go/pZqRjFqwX9

Answer 2

您好“Source Ordering”会将您的列推到网格之外，但您可以显示/隐藏其他列。

请参阅：Foundation 5 Grid Push Pull

我的小提琴：http://jsfiddle.net/s6p6uguL/3/

<div class="row">
    <div class="small-12 medium-6 large-4 columns"><h1>1</h1></div>
    <div class="small-12 medium-6 large-4 columns show-for-medium"><h1>4</h1></div>
    <div class="small-12 medium-6 large-4 columns"><h1>2</h1></div>
    <div class="small-12 medium-6 large-4 columns"><h1>3</h1></div>
    <div class="small-12 medium-6 large-4 columns hide-for-medium"><h1>4</h1></div>
</div>

在基础中以不同顺序折叠列

2 个答案: