 <p>If I understand you correctly you want the final product to look like this:</p> <p><img src="https://i.stack.imgur.com/TixFy.png" alt="I think this is what you are looking for."></p> <p>The current order of the row you want changed is DEAD MAIN’S CACHE (Text), BENJAMIN (Portrait), and then PROTECT YOUR NECK (Coffee Bean?).</p> <p>Switch DEAD MAIN’S CACHE (Text) and PROTECT YOUR NECK (Coffee Bean?).</p> <p>Remove all references to <code>small</code> and use push and pull to correct the order for large screens.</p> <p>Your current code:</p> <pre><code>&lt;div class="row"&gt; &lt;div class="small-12 small-push-12 large-4 columns"&gt;DEAD MAIN’S CACHE (Text)&lt;/div&gt; &lt;div class="large-4 columns"&gt;BENJAMIN (Portrait)&lt;/div&gt; &lt;div class="small-12 small-push-12 large-4 columns"&gt;PROTECT YOUR NECK (Coffee Bean?)&lt;/div&gt; &lt;/div&gt; </code></pre> <p>My suggestion:</p> <pre><code>&lt;div class="row"&gt; &lt;div class="large-4 large-push-8 columns"&gt;PROTECT YOUR NECK (Coffee Bean?)&lt;/div&gt; &lt;div class="large-4 columns"&gt;BENJAMIN (Portrait)&lt;/div&gt; &lt;div class="large-4 large-pull-8 columns"&gt;DEAD MAIN’S CACHE (Text)&lt;/div&gt; &lt;/div&gt; </code></pre> <p>In essence, design for mobile first and use the push/pull to "fix" larger screen sizes.</p> <p>If I misunderstood your question please let me know.</p> <p>I hope that helps.</p>