+
+ {
+ // middle column for three columns layout and the right column for two columns layout
+ // small breakpoint: takes full width
+ // medium breakpoint: ~63% of the width without the additional column or 50% of the second row with the additional column
+ // large breakpoint: 66% of the width without the additional column or 33% with the additional column
+ }
+
+ { secondaryColumn }
+
+ {
+ // additional column for three columns layout
+ // small breakpoint (max 4 cols): takes full width
+ // medium breakpoint (max 8 cols): 50% of the second row width
+ // large breakpoint (max 12 cols): 33% of the width
+ additionalColumn && (
+