如何推動/拉動移動基礎上的柱子？

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東西推離視口。

Answer 1

更改small-pull-4到small-pull-8

你應該4把你列，你需要爲第一個div 和pull 8four column空間，你的第一列佔據8 columns

<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> 

Answer 2

推與拉的作品浮動元素。

你必須使用jQuery，例如：

$('.col1').before($('.col2'));