Menu icon Foundation
Move divs based on screen size

I have the following divs for my desktop:

However, when the page is viewed on the mobile screen, I want the main content to be at the top of the page. Any ideas on how to create this layout?

Thank you

<div class=“row>
<div class=“large-3 columns> left sidebar
<div class=“large-6 columns> main content
<div class=“large-3 columns> right sidebar
            

         

grid

I have the following divs for my desktop:

However, when the page is viewed on the mobile screen, I want the main content to be at the top of the page. Any ideas on how to create this layout?

Thank you

<div class=“row>
<div class=“large-3 columns> left sidebar
<div class=“large-6 columns> main content
<div class=“large-3 columns> right sidebar
            

         
Karl Ward over 5 years ago

The key here, is to remember that Foundation is "mobile first", so you should build the default layout as it should display in stacking order on mobile. Thereafter, classes can be applied to manipulate how the layout will display on larger screens, including push- or pull- classes to change the order:

<div class=row>
<div class="large-6 large-push-3 columns">main content</div>
<div class="large-3 large-pull-6 columns">left sidebar</div>
<div class="large-3 columns">right sidebar</div>
</div>

In the above html, you will have the main content on top by default. Then for large- screens, we are using the pull- and push- classes to move the main content 3 columns to the right, and the left sidebar 6 columns to the left, effectively switching their positions.

ndh over 5 years ago

That helps! Thank you