title: Can I use push-pull/source ordering in Foundation to achieve this layout?
body: <p>I'm trying to create a responsive layout using the <a href="http://foundation.zurb.com/docs/components/grid.html" rel="nofollow">Zurb Foundation 4 Grid</a>, and having a difficult time wrapping my head around how I could possibly create a column layout using push-pull that orders content properly in both mobile and desktop without having to resort to javascript or duplicating data in "hide-for-small/hide-for-large" classed DIVs. </p>
  
  <p>Following the "mobile first" philosophy, let's say that I have the following desired layout for an event site:</p>
  
  <p>Mobile:</p>
  
  <pre><code>12 columns
  ========================
  [Name / Date / Location]
  [Photo                 ]
  [Event details         ]
  [Attendees             ]
  [RSVP                  ]
  [Edit link             ]
  </code></pre>
  
  <p>Desktop:</p>
  
  <pre><code>4 columns          8 columns
  =============================================
  [Photo     ]    |   [Name / Date / Location ]
  [RSVP      ]    |   [Event details          ]
  [Edit Link ]    |   [Attendees              ]
  </code></pre>
  
  <p>How can I format the HTML so that it would display in the proper order in both circumstances?</p>
  
  <p>Right now, I'm doing this for mobile:</p>
  
  <pre><code>&lt;!-- note: there are many ways to create this layout -
             it could be in sets of individual rows as well --&gt;
  &lt;div class="row"&gt;
    &lt;div class="small-12 columns"&gt;
        &lt;div class="namedatelocation"&gt;(name/date/location html)&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="small-12 columns"&gt;
        &lt;div class="photo"&gt;(photo html)&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="small-12 columns"&gt;
        &lt;div class="details"&gt;(details html)&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="small-12 columns"&gt;
        &lt;div class="attendees"&gt;(attendees html)&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="small-12 columns"&gt;
        &lt;div class="rsvp"&gt;(rsvp html)&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="small-12 columns"&gt;
        &lt;div class="edit"&gt;(edit html)&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I can do this for desktop:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="large-4 columns"&gt;
        &lt;div class="photo"&gt;(photo html)&lt;/div&gt;
        &lt;div class="rsvp"&gt;(rsvp html)&lt;/div&gt;
        &lt;div class="edit"&gt;(edit html)&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="large-8 columns"&gt;
        &lt;div class="namedatelocation"&gt;(name/date/location html)&lt;/div&gt;
        &lt;div class="details"&gt;(details html)&lt;/div&gt;
        &lt;div class="attendees"&gt;(attendees html)&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I create this content in a responsive manner?  The best I've been able to accomplish so far is to break the content into "pairs" and put each pair into its own row with push-pull used to change the order of the 2 columns inside the row.  The issue with this approach, besides the limitation of only reordering pairs - is that the height of each row is equal to the tallest of the two columns in that row.  This means that there's a huge amount of dead space in the desktop layout. </p>
  
  <p>Any ideas on how I could accomplish what I'm trying to do?  Or is it not possible in Foundation?  If not, what would be the proper way to address this problem in general?</p>