Zurb foundation will float
the last column to the right by default:
[class*="column"]+[class*="column"]:last-child { /* Taken from foundation.css */
float: right;
}
In order to work around browsers' different rounding behaviors, Foundation will float the last column in a row to the right so the edge aligns. [...]
There are couple of methods to override that and move the last column to the left:
1. Using .end
class (It is buggy in version 5.0.3)
[...] If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of
end
in order to override that behavior.
<div class="row">
<div class="small-4 columns"> ... </div>
<div class="small-4 columns end"> ... </div>
</div>
Although .end
is expected to work in version 5.0.3 as well, but it doesn't work properly because another global .end
class will override that. However it is fixed since version 5.1.0.
Example (v4.1.6) • Example (v5.0.3) (buggy) • Example (v5.1.0)
Related issues can be found here:
- https://github.com/zurb/foundation/issues/4215
- https://github.com/zurb/foundation/issues/4223
- https://github.com/zurb/foundation/pull/4183 [FIXED: by removing global classes]
If for any reason you're using v5.0.3, there are some alternatives:
2. Using .left
class
One option would be to use .left
utility class on the last column to float it to the left:
Example Here (v5.0.3).
<div class="row">
<div class="small-4 columns"> ... </div>
<div class="small-4 columns left"> ... </div>
</div>
3. Overriding the default style
Another option could be to override the default style of Zurb foundation as follows:
Example Here (v5.0.3).
.columns.end { float: left !important; }
Or something like:
Example Here (v5.0.3).
[class*="column"]+[class*="column"]:last-child {
float: left;
}
4. Using source ordering classes
Generally you could use *-pull-#
/*-push-#
source ordering classes to move a column to a side.
In this case, you should use small-pull-4
for the second column at the second row, as follows:
<div class="row">
<div class="small-4 columns"> ... </div>
<div class="small-4 small-pull-4 columns"> ... </div>
</div>
WORKING DEMO. (Using Foundation 5.0.3)
Note: For Foundation 4, you should use pull-4
class instead. Take a look at the source ordering section at the doc. But this will only work on large displays.
UPDATED DEMO. (Using Foundation 4.1.6)