$max-cols: 12;

%col-base {
    position: relative;
    width: 100%;
}

.container {
    @media (min-width: $desktop-breakpoint) {
        max-width: var(--desktop-container-width);
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.col {
    @extend %col-base;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

@for $i from 1 through $max-cols {
    $width: (100 / ($max-cols / $i) ) * 1%;

    .col-#{$i} {
        @extend %col-base;
        flex: 0 0 $width;
        max-width: $width;
    }

    .order-#{$i} {
        order: #{$i};
    }

    body .desktop {
        &-col-#{$i} {
            @extend %col-base;
            @media (min-width: $desktop-breakpoint) {
                flex: 0 0 $width;
                max-width: $width;
            }
        }

        &-order-#{$i} {
            order: #{$i};
        }
    }
}

.order-first {
    order: -1;
}

@media (min-width: $desktop-breakpoint) {
    body .desktop-order-first {
        order: -1;
    }
}

.flex {
    display: flex;
}