Menu icon Foundation
Source Ordering Issue

I need to use source ordering to make an image appear first for small screens and second for medium and higher screens.

Not really sure where I'm going wrong, however, the image continues to appear second, despite adding in small-order-1.

Can someone help me out?

*edit* I'm using Foundation 6.

Here's the image... the 'handshake' should be coming first, above the text.

Handshake should be coming first.

Here's the relevant code:

<div class="row">

<div class="column small-12 medium-4 medium-offset-2 small-order-2 medium-order-1">
	<h4><strong>Our priority is you</strong></h4>
	<p>EST skip tracers act with integrity, respect, and courtesy as
	it is our goal to provide service that exceeds expectations.
	We go the extra mile to ensure that you are satisfied with our results.</p>
</div>

<div class="column small-12 medium-4 small-order-1 medium-order-2 text-center end">
     <img src="images/handshake.png" style="padding-bottom:50px;"/>
</div>

</div>

source orderingfoundation 6

I need to use source ordering to make an image appear first for small screens and second for medium and higher screens.

Not really sure where I'm going wrong, however, the image continues to appear second, despite adding in small-order-1.

Can someone help me out?

*edit* I'm using Foundation 6.

Here's the image... the 'handshake' should be coming first, above the text.

Handshake should be coming first.

Here's the relevant code:

<div class="row">

<div class="column small-12 medium-4 medium-offset-2 small-order-2 medium-order-1">
	<h4><strong>Our priority is you</strong></h4>
	<p>EST skip tracers act with integrity, respect, and courtesy as
	it is our goal to provide service that exceeds expectations.
	We go the extra mile to ensure that you are satisfied with our results.</p>
</div>

<div class="column small-12 medium-4 small-order-1 medium-order-2 text-center end">
     <img src="images/handshake.png" style="padding-bottom:50px;"/>
</div>

</div>
James Young over 2 years ago

Still here and still stumped. I'm using the example from the Foundation 6 guide and do not see source-ordering happening at all.

Here is another example of source-ordering not happening for me. Can source-ordering happen in a nested grid or do the columns need to be in their own stand-alone row?

print "<div class='row collapse'>";
	print "<div class='small-6 medium-2 columns small-order-2 medium-order-1 text-center'>#<span id='jersey$stat'>" . $pdisplay[0]["jersey"] . "</span></div>";
	print "<div class='small-12 medium-8 columns small-order-1 medium-order-2 text-center'><span id='pname$stat'>$vplink" . $pdisplay[0]["pid"] . ">" . $pdisplay[0]["name"] . "</a></span></div>";
	print "<div class='small-6 medium-2 columns small-order-3 medium-order-3 text-center'><span id='pos$stat'>" . $pdisplay[0]["pos"] . "</span></div>";

print "</div>";