Foundation
I am running into an issue. When designing an email template, I am using the following <th class="small-12 large-3 columns">, when the screen size meets the small requirement, the row collapses the cell into a single column as determined by the class "small-12". When the screen is expanded, I believe that based off of the class "large-3" it should only allow "four" cells in a single row, pushing any remaining cells to the next "row" below. See the linked JSFiddle, https://jsfiddle.net/xq1fdtqs/
I the example, I have "nine" cells in a single row. Ideally, when viewed on a large screen the max number of cells in a single row should be "four" so, it should look like the following
one two three four
five six seven eight
nine
Instead, it just displaying as
one two three four five six seven eight nine
What am I missing? Any help would be greatly appreciated.
Thanks.
On large, your columns must add up to 12 in a row. if they don't you can use offsets (as explained in the docs) to have uneven rows. However what you're trying to do is not going to work.
Your columns have to add up to 12 in a single row.
row
One (3 columns) | Two (3 columns) | Three (three columns) | Four (three columns) = 12
/row
row
Five (3 columns) | Six (3 columns) Seven (three columns) | Eight (three columns) = 12
/row
row
nine (3 columns) (you would need to use the "large-offsets" classes for this row since they don't add up to 12.
/row
your html code also had some nesting errors with <th> that I corrected. The new HTML would look like this and should achieve the result you're looking for.