Foundation framework push/pull problem

Hi there,

I have the following code which is running Foundation framework.

What I am having issues with is getting the main copy section to appear directly below the “Panel 1” and “Panel 2” blocks when on a large/desktop site. It works fine on medium/tablet though.

I’m guessing its something to do with the push/pull I have in place?

This is my code:

<div class="row">
         <!-- right -->
         <div class="large-9 large-push-3 columns ">
            <div class="large-7 medium-12 small-12 columns no-padding-right" style="position:relative; z-index:201; height: 200px; background: #ccc">
               PANEL 1
            </div>
            <div class="large-5 hide-for-medium hide-for-small columns no-padding-left">
               PANEL 2
            </div>
            <div style="clear:both; position: relative"></div>
         </div>
         <div class="large-3 large-pull-9 medium-4  columns">
            <div class="large-12 panel radius">
               <form>
                  <div class="row">
                     <div class="large-12 columns newsletter">
                        <p class="no-margin">Join our mailing list</p>
                        <span>Receive news, discounts &amp; more</span>
                        <div class="row collapse">
                           <div class="small-10 columns">
                              <input type="text" placeholder="enter your email address..." class="no-margin">
                           </div>
                           <div class="small-2 columns">
                              <a class="button prefix newsletter no-margin" href="#"><i class="fa fa-caret-right"></i></a>
                           </div>
                        </div>
                     </div>
                  </div>
               </form>
            </div>
            <div class="large-12 panel radius">
               <div class="row">
                  <div class="large-12 columns newsletter">
                     <p class="no-margin">Blog</p>
                     blog feed 
                  </div>
               </div>
            </div>
            <div class="large-12 panel radius">
               <div class="row">
                  <div class="large-12 columns newsletter">
                     <p class="no-margin">face tweet</p>
                     social feed 
                  </div>
               </div>
            </div>
         </div>
         <div class="medium-8  columns">           
            COPY HERE
         </div>
         <!-- end sidebar -->
      </div>

Any ideas what I have wrong?

Thanks!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.