Source ordering — the ability to swap columns in a Foundation for Sites layout — is great if we want certain HTML, like a sidebar or navigation component, later in our HTML and earlier in our layout. It's also handy when ordering rows in coded prototypes without moving masses of HTML. The technique works because we know in advance how wide each Foundation grid column is. Shuffling them around is as simple as moving them the predefined width left or right.

But rows are different. We can't predict how tall they are, so we can't use CSS margin to move them around. It's possible to rearrange rows, however, to keep lesser-used elements at the end of your HTML but relatively high in your visual layout. All it takes is a little jQuery. Here's how to swap two rows in Foundation for Sites.

To keep this demo clear, we'll use a simple layout:

<div>
<div class="large-12 columns">
   Row 1
 </div>
</div>
<div>
 <div class="large-12 columns">
   Row 2
 </div>
</div>

1. Set up Foundation.

Foundation sites come with JavaScript plugged in and turned on. The easiest way to add more JS code is to write it at the end of the file.

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
// Your code goes here
</script>
</body>
</html>

2. Give the second row an ID.

Of the two rows you're transposing, choose the row that will move up. Give it an ID, something straightforward like "row2".

<div id="row2">

3. Select that row with jQuery.

Foundation for Sites uses jQuery, which makes selecting the bottom row a cinch. By declaring row2 a variable, we can quickly refer to it in other places, like the next step.

var row2 = $('#row2');

4. Take that row out of the DOM.

The document object model determines where each element is, based on the provided HTML. This jQuery takes the row before row2 out of the mix.

row1 = row2.prev().detach();

5. Shuffle them around.

Finally, we reinsert the top row into the DOM — but below row2.

row1.insertAfter(row2);

And there you go: Switching rows around without changing your HTML.

Oh, and one more thing.

Given all this, you might want to keep an eye on our Playground page. Just sayin’.

---