css - dynamic responsive grid using Suzy -

i'm using susy , want create grid show elements (charts actually) order determined @ runtime (user can change order). problem is, there charts preferably shown wider others.

suppose @ width have 6 columns, , have 2 types of charts, small 1 preferably taking 2 columns , wide 1 preferably taking 4 columns.

1. when have small , wide one, want them fill row 2 + 4 columns (meaning wide 1 need have "at 3" specified).
2. when have 2 small ones want them fill row 3 + 3 columns (meaning second 1 need have "at 4" specified).
3. when have 2 wide ones, want them on 2 rows, each taking 6 columns ("at 0").

so let's order 3 small ones, 2 wide ones, 1 small 1 , 2 wide ones, rows this:

3+3

2+4

4+2

6

6

at other widths rules may different. know how use breakpoints / element queries know how apply different scss depending on width. me seems order of wide/small elements must known when writing scss. how can done when order isn't known?