Display order

The display order styles provide helper classes for setting the display order of items with the order style.

Each display order base class has a class to go with each of the media query viewport sizes. For example:

order-2-3xs
order-2-2xs
order-2-xs
order-2-sm
order-2-md
order-2-lg
order-2-xl
order-2-1xl
order-2-3xl
order-2-4xl
order-2-5xl

How to import into your CSS

Import this into your CSS with:

@import 'cacao-css/dist/display/order.css';

Imports are available for all media query viewport sizes.

@import 'cacao-css/dist/display/3xs/order.css';
@import 'cacao-css/dist/display/2xs/order.css';
@import 'cacao-css/dist/display/xs/order.css';
@import 'cacao-css/dist/display/sm/order.css';
@import 'cacao-css/dist/display/md/order.css';
@import 'cacao-css/dist/display/lg/order.css';
@import 'cacao-css/dist/display/xl/order.css';
@import 'cacao-css/dist/display/2xl/order.css';
@import 'cacao-css/dist/display/3xl/order.css';
@import 'cacao-css/dist/display/4xl/order.css';
@import 'cacao-css/dist/display/5xl/order.css';

See Import Cacao CSS for more information.

Source CSS

Default styles

display/order.css

/* =========================================================================== *\
    Order utilities
\* =========================================================================== */

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.order-4 {
    order: 4;
}

.order-5 {
    order: 5;
}

3xs styles

display/3xs/order.css

/* =========================================================================== *\
    Order utilities
\* =========================================================================== */

@media (--m-3xs) {
    .order-1-3xs {
        order: 1;
    }

    .order-2-3xs {
        order: 2;
    }

    .order-3-3xs {
        order: 3;
    }

    .order-4-3xs {
        order: 4;
    }

    .order-5-3xs {
        order: 5;
    }
}

2xs styles

display/2xs/order.css

/* =========================================================================== *\
    Order utilities
\* =========================================================================== */

@media (--m-2xs) {
    .order-1-2xs {
        order: 1;
    }

    .order-2-2xs {
        order: 2;
    }

    .order-3-2xs {
        order: 3;
    }

    .order-4-2xs {
        order: 4;
    }

    .order-5-2xs {
        order: 5;
    }
}

xs styles

display/xs/order.css

/* =========================================================================== *\
    Order utilities
\* =========================================================================== */

@media (--m-xs) {
    .order-1-xs {
        order: 1;
    }

    .order-2-xs {
        order: 2;
    }

    .order-3-xs {
        order: 3;
    }

    .order-4-xs {
        order: 4;
    }

    .order-5-xs {
        order: 5;
    }
}

sm styles

display/sm/order.css

/* =========================================================================== *\
    Order utilities
\* =========================================================================== */

@media (--m-sm) {
    .order-1-sm {
        order: 1;
    }

    .order-2-sm {
        order: 2;
    }

    .order-3-sm {
        order: 3;
    }

    .order-4-sm {
        order: 4;
    }

    .order-5-sm {
        order: 5;
    }
}

md styles

display/md/order.css

/* =========================================================================== *\
    Order utilities
\* =========================================================================== */

@media (--m-md) {
    .order-1-md {
        order: 1;
    }

    .order-2-md {
        order: 2;
    }

    .order-3-md {
        order: 3;
    }

    .order-4-md {
        order: 4;
    }

    .order-5-md {
        order: 5;
    }
}

lg styles

display/lg/order.css

/* =========================================================================== *\
    Order utilities
\* =========================================================================== */

@media (--m-lg) {
    .order-1-lg {
        order: 1;
    }

    .order-2-lg {
        order: 2;
    }

    .order-3-lg {
        order: 3;
    }

    .order-4-lg {
        order: 4;
    }

    .order-5-lg {
        order: 5;
    }
}

xl styles

display/xl/order.css

/* =========================================================================== *\
    Order utilities
\* =========================================================================== */

@media (--m-xl) {
    .order-1-xl {
        order: 1;
    }

    .order-2-xl {
        order: 2;
    }

    .order-3-xl {
        order: 3;
    }

    .order-4-xl {
        order: 4;
    }

    .order-5-xl {
        order: 5;
    }
}

2xl styles

display/2xl/order.css

/* =========================================================================== *\
    Order utilities
\* =========================================================================== */

@media (--m-2xl) {
    .order-1-2xl {
        order: 1;
    }

    .order-2-2xl {
        order: 2;
    }

    .order-3-2xl {
        order: 3;
    }

    .order-4-2xl {
        order: 4;
    }

    .order-5-2xl {
        order: 5;
    }
}

3xl styles

display/3xl/order.css

/* =========================================================================== *\
    Order utilities
\* =========================================================================== */

@media (--m-3xl) {
    .order-1-3xl {
        order: 1;
    }

    .order-2-3xl {
        order: 2;
    }

    .order-3-3xl {
        order: 3;
    }

    .order-4-3xl {
        order: 4;
    }

    .order-5-3xl {
        order: 5;
    }
}

4xl styles

display/4xl/order.css

/* =========================================================================== *\
    Order utilities
\* =========================================================================== */

@media (--m-4xl) {
    .order-1-4xl {
        order: 1;
    }

    .order-2-4xl {
        order: 2;
    }

    .order-3-4xl {
        order: 3;
    }

    .order-4-4xl {
        order: 4;
    }

    .order-5-4xl {
        order: 5;
    }
}

5xl styles

display/5xl/order.css

/* =========================================================================== *\
    Order utilities
\* =========================================================================== */

@media (--m-5xl) {
    .order-1-5xl {
        order: 1;
    }

    .order-2-5xl {
        order: 2;
    }

    .order-3-5xl {
        order: 3;
    }

    .order-4-5xl {
        order: 4;
    }

    .order-5-5xl {
        order: 5;
    }
}