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
Instead, it just displaying as
one two three four five six seven eight nine
What am I missing? Any help would be greatly appreciated.