grid.scss

// Display 1 column on mobile, 1 column on desktop
.show-1-1 {
    flex-basis: 100%;
}
.show-1-2 {
    flex-basis: 100%;
}
.show-1-3 {
    flex-basis: 100%;
}
.show-1-4 {
    flex-basis: 100%;
}
.show-2-4 {
    flex: 0 1 calc(50% - .5rem);
}

@media (min-width: 768px) {
    .show-1-2 {
        flex: 0 1 calc(50% - .5rem);
    }
    .show-1-3 {
        flex: 0 1 calc(33% - .5rem);
        &.no-gap {
            flex-basis: 33.33%;
        }
    }
    .show-1-4 {
        flex: 0 1 calc(25% - .75rem);
    }
    .show-2-4 {
        flex: 0 1 calc(25% - .75rem);
    }
}

.ui {
    display: block;
    @include md {
        display: flex;
        flex-wrap: wrap;
    }
    &__visual {
        @include md {
            flex: 1;
        }
    }
    &__code {
        @include md {
            flex: 2;
            margin-left: .5rem;
        }
    }
}