Menu icon Foundation
Complex Layout Problems and Source Order

I am still trying to wrap my head around foundation (without much success). I am trying to create a layout where horizontally, the sections don't line up. I am unclear about what the layout limitations in Foundation are - if I am trying to make it do something it was not meant to do or if I just don't understand how to do it.

I have worked on a mockup in codepen
http://codepen.io/4culture/pen/dPoeGV

I can't figure out how to make the Blog Feed "go with" the Grant Listing and not just be on the same horizontal line with the Main Feature. (See attached desktop and mobile designs.)

My other problem is that, when going to mobile, I would like the order to be different but I can't seem to figure out to separate out the Intro from the 3 MiniFeatures. (See attached desktop and mobile designs.)

Any help would be greatly, greatly, greatly appreciated (I think my co-worker is getting tired of hearing me *sigh*)

<div class="row">
        <div class="medium-8 large-8 columns">
            <div class="panel small-12 medium-6 large-6 columns">
                <h2>intro</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adi. </p>
            </div>
            <div class="panel small-12 medium-6 large-6 columns"><img src="http://placehold.it/600x400&amp;text=minifeature1">
                <h4>Descriptor</h4></div>
            <div class="panel small-12 medium-6 large-6 columns"><img src="http://placehold.it/600x400&amp;text=minifeature2">
                <h4>Descriptor</h4></div>
            <div class="panel small-12 medium-6 large-6 columns"><img src="http://placehold.it/600x400&amp;text=minifeature3">
                <h4>Descriptor</h4></div>
        </div>
        <div class="panel small-12 medium-4 large-4 columns">
            <h3>Grant Listing</h3>
            <p>Should be on top in small view</p>
            <table>
                <tr>
                    <td>ongoing</td>
                    <td>Open 4Culture</td>
                </tr>
                    <td>ongoing</td>
                    <td>Open 4Culture</td>
                </tr>
                    <td>ongoing</td>
                    <td>Open 4Culture</td>
                </tr>
                </tr>
                    <td>ongoing</td>
                    <td>Open 4Culture</td>
                </tr>
                    <td>ongoing</td>
                    <td>Open 4Culture</td>
                </tr>
                </tr>
                    <td>ongoing</td>
                    <td>Open 4Culture</td>
                </tr>
                    <td>ongoing</td>
                    <td>Open 4Culture</td>
                </tr>
             </table>
         </div>
        </div>
      <div class="row">
        <div class="panel small-12 medium-8 large-8 columns"><img src="http://placehold.it/600x400&amp;text=Mainfeature">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae tellus a massa mattis eleifend ac ac felis. Donec ac dapibus mi. In rhoncus finibus eros</p>
        </div>
        <div class="panel small-12 medium-4 large-4 columns"> 
            <h3>Blog Feed</h3>
            <ul>
                <li>List1</li>
                <li>List1</li>
                <li>List1</li>
            </ul>
        </div>
      </div>
            

         

Programs desktop

Programs mobile

layoutsidebargridsource order

I am still trying to wrap my head around foundation (without much success). I am trying to create a layout where horizontally, the sections don't line up. I am unclear about what the layout limitations in Foundation are - if I am trying to make it do something it was not meant to do or if I just don't understand how to do it.

I have worked on a mockup in codepen
http://codepen.io/4culture/pen/dPoeGV

I can't figure out how to make the Blog Feed "go with" the Grant Listing and not just be on the same horizontal line with the Main Feature. (See attached desktop and mobile designs.)

My other problem is that, when going to mobile, I would like the order to be different but I can't seem to figure out to separate out the Intro from the 3 MiniFeatures. (See attached desktop and mobile designs.)

Any help would be greatly, greatly, greatly appreciated (I think my co-worker is getting tired of hearing me *sigh*)

<div class="row">
        <div class="medium-8 large-8 columns">
            <div class="panel small-12 medium-6 large-6 columns">
                <h2>intro</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adi. </p>
            </div>
            <div class="panel small-12 medium-6 large-6 columns"><img src="http://placehold.it/600x400&amp;text=minifeature1">
                <h4>Descriptor</h4></div>
            <div class="panel small-12 medium-6 large-6 columns"><img src="http://placehold.it/600x400&amp;text=minifeature2">
                <h4>Descriptor</h4></div>
            <div class="panel small-12 medium-6 large-6 columns"><img src="http://placehold.it/600x400&amp;text=minifeature3">
                <h4>Descriptor</h4></div>
        </div>
        <div class="panel small-12 medium-4 large-4 columns">
            <h3>Grant Listing</h3>
            <p>Should be on top in small view</p>
            <table>
                <tr>
                    <td>ongoing</td>
                    <td>Open 4Culture</td>
                </tr>
                    <td>ongoing</td>
                    <td>Open 4Culture</td>
                </tr>
                    <td>ongoing</td>
                    <td>Open 4Culture</td>
                </tr>
                </tr>
                    <td>ongoing</td>
                    <td>Open 4Culture</td>
                </tr>
                    <td>ongoing</td>
                    <td>Open 4Culture</td>
                </tr>
                </tr>
                    <td>ongoing</td>
                    <td>Open 4Culture</td>
                </tr>
                    <td>ongoing</td>
                    <td>Open 4Culture</td>
                </tr>
             </table>
         </div>
        </div>
      <div class="row">
        <div class="panel small-12 medium-8 large-8 columns"><img src="http://placehold.it/600x400&amp;text=Mainfeature">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae tellus a massa mattis eleifend ac ac felis. Donec ac dapibus mi. In rhoncus finibus eros</p>
        </div>
        <div class="panel small-12 medium-4 large-4 columns"> 
            <h3>Blog Feed</h3>
            <ul>
                <li>List1</li>
                <li>List1</li>
                <li>List1</li>
            </ul>
        </div>
      </div>
            

         

Programs desktop

Programs mobile
Rafi Benkual almost 5 years ago

The best way to get this layout is to nest the grid. I kinda built up a quick prototype.

http://codepen.io/rafibomb/pen/myJKvV?editors=100

To nest the grid you need to have a row inside the set of columns, then the columns. If you nest columns they still add up to 12.

Also, if you don't define a small grid, it will default to small-12. If you define small-whatever and not medium and large, then the large breakpoints inherit the small grid sizing.

Anna Callahan almost 5 years ago

Thank you so much Rafi!

I had been dreading coming in to work today because I was so stuck.