html - 如何将列推/拉到移动基础上？

Question

我在桌面上有这样的东西

[Column1 large-8] [Column2 large-4]

我想在手机上

[Column2 large-4]
[Column1 large-8]

这是我的片段

<div id="search-content" class="row main-content">

    <div class="columns large-8">

    </div>

    <aside class="columns large-4">

    </aside>

</div>

当我尝试这个的时候

<div id="search-content" class="row main-content">

    <div class="columns large-8 small-push-4">

    </div>

    <aside class="columns large-4 small-pull-4">

    </aside>

</div>

它正在做这样的事情

[Column2 large-4 small-pull-4][Column1 large-8 small-push-4]

Column2 某些东西被推离了视口(viewport)。

Answer 1

将 small-pull-4 更改为 small-pull-8

你应该将你的列推 4 因为你需要 four column 空间用于第一个 div并且 pull 8 因为你的第一列占用了 8 列

<div id="search-content" class="row main-content">
    <div class="columns large-8 small-push-4">
    </div>
    <aside class="columns large-4 small-pull-8">
    </aside>
</div>