diff --git a/packages/grid/src/styles/column.module.css b/packages/grid/src/styles/column.module.css index d97d9221e..9b0fc3ba1 100644 --- a/packages/grid/src/styles/column.module.css +++ b/packages/grid/src/styles/column.module.css @@ -137,6 +137,55 @@ transform: translateX(100%); } +/* Small Order Classes */ +.sm-order-1 { + order: 1; +} + +.sm-order-2 { + order: 2; +} + +.sm-order-3 { + order: 3; +} + +.sm-order-4 { + order: 4; +} + +.sm-order-5 { + order: 5; +} + +.sm-order-6 { + order: 6; +} + +.sm-order-7 { + order: 7; +} + +.sm-order-8 { + order: 8; +} + +.sm-order-9 { + order: 9; +} + +.sm-order-10 { + order: 10; +} + +.sm-order-11 { + order: 11; +} + +.sm-order-12 { + order: 12; +} + @media (min-width: 768px) { /* Medium Width Classes */ .md-1 { @@ -253,6 +302,55 @@ .md-offset-12 { transform: translateX(100%); } + + /* Medium Order Classes */ + .md-order-1 { + order: 1; + } + + .md-order-2 { + order: 2; + } + + .md-order-3 { + order: 3; + } + + .md-order-4 { + order: 4; + } + + .md-order-5 { + order: 5; + } + + .md-order-6 { + order: 6; + } + + .md-order-7 { + order: 7; + } + + .md-order-8 { + order: 8; + } + + .md-order-9 { + order: 9; + } + + .md-order-10 { + order: 10; + } + + .md-order-11 { + order: 11; + } + + .md-order-12 { + order: 12; + } } @media (min-width: 1024px) { @@ -371,6 +469,55 @@ .lg-offset-12 { transform: translateX(100%); } + + /* Large Order Classes */ + .lg-order-1 { + order: 1; + } + + .lg-order-2 { + order: 2; + } + + .lg-order-3 { + order: 3; + } + + .lg-order-4 { + order: 4; + } + + .lg-order-5 { + order: 5; + } + + .lg-order-6 { + order: 6; + } + + .lg-order-7 { + order: 7; + } + + .lg-order-8 { + order: 8; + } + + .lg-order-9 { + order: 9; + } + + .lg-order-10 { + order: 10; + } + + .lg-order-11 { + order: 11; + } + + .lg-order-12 { + order: 12; + } } @media (min-width: 1024px) { @@ -489,4 +636,53 @@ .xl-offset-12 { transform: translateX(100%); } + + /* Extra Large Order Classes */ + .xl-order-1 { + order: 1; + } + + .xl-order-2 { + order: 2; + } + + .xl-order-3 { + order: 3; + } + + .xl-order-4 { + order: 4; + } + + .xl-order-5 { + order: 5; + } + + .xl-order-6 { + order: 6; + } + + .xl-order-7 { + order: 7; + } + + .xl-order-8 { + order: 8; + } + + .xl-order-9 { + order: 9; + } + + .xl-order-10 { + order: 10; + } + + .xl-order-11 { + order: 11; + } + + .xl-order-12 { + order: 12; + } }