On my desktop, I have a layout like this:
[Column1 large-8] [Column2 large-4]
For mobile view, I'd like it to be like this:
[Column2 large-4]
[Column1 large-8]
Below is the code snippet I am working with:
<div id="search-content" class="row main-content">
<div class="columns large-8">
</div>
<aside class="columns large-4">
</aside>
</div>
However, when trying the following code:
<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>
The layout ends up looking like this:
[Column2 large-4 small-pull-4][Column1 large-8 small-push-4]
Due to which Column2 gets pushed off the screen.