How to make transfer on different screens in Susy!?

Question

css

codepen.io/anon/pen/XNZaQR?editors=1100
actually the question is: I can't understand why, with a width of 768, both columns (left and right) become 6 columns (spans) and stand in a line! while I expected a completely different result, because I indicated that at 768 it takes 12 spans! I hoped that they would both become the width of the container (12 columns) and line up one under the other!
Please tell me what I did wrong?

Answer 1

Because flex is assigned to the main container, and float techniques are used inside it (via Susy).
Those. when using Flex instead of:
you need to write:
Or if you want to float in Susy, then just remove flex for main.
Not a word about output: flexboxthe documentation: susydocs.oddbird.net/en/latest/settings/#output