Menu icon Foundation
jointswp - Align sidebar on left

Using jointswp with WordPress, I'd like to align the sidebar to the left and the content to the right. 

In the source code, I would like for the sidebar to come after the content. Visually, in the browser, it still looks like the sidebar is first though. Here is the jointswp sidebar:

<div id="sidebar1" class="sidebar large-4 medium-4 columns" role="complementary">

I looked at the push/pull grid options, but I think I don't know what I'm doing.

I think I can add "float-right" to the main columns, but I'm not sure if that's the optimal way to use the Foundation grid. It looks like this:

<main id="main" class="large-8 medium-8 columns right" role="main">

jointswpwordpress

Using jointswp with WordPress, I'd like to align the sidebar to the left and the content to the right. 

In the source code, I would like for the sidebar to come after the content. Visually, in the browser, it still looks like the sidebar is first though. Here is the jointswp sidebar:

<div id="sidebar1" class="sidebar large-4 medium-4 columns" role="complementary">

I looked at the push/pull grid options, but I think I don't know what I'm doing.

I think I can add "float-right" to the main columns, but I'm not sure if that's the optimal way to use the Foundation grid. It looks like this:

<main id="main" class="large-8 medium-8 columns right" role="main">
Ryan Patterson 2 months ago

Hi T,

 

You should be able to use the source ordering classes. So I would do something like: 

 

<div class="row" id="container-wrapper">
    <main id="main" class="medium-8 large-8 medium-push-4 columns" role="main">
        .....main content
    </main>
    <aside id="sidebar1" class="sidebar medium-4 large-4 medium-pull-8 columns" role="complementary">
        .....sidebar content
    </aside>
    
</div>

 

Here is an instructional video Zurb provides explaining how to use the source ordering classes. https://www.youtube.com/watch?v=k1zizfK2xbQ

T Davis about 2 months ago

Yes! That is the answer. Thank you for helping a noob understand.