.direction {
    display: flex;
    flex-direction: column;
}

/* always above */
.direction.direction-column-reverse {
    flex-direction: column-reverse;
}

.direction.direction-column-reverse .text {
    flex: 0 0 100%;
    max-width: 100%;
}

.direction.direction-column-reverse .media {
    margin-bottom: 1.5rem;
}

/* always below */
.direction.direction-column .text {
    flex: 0 0 100%;
    max-width: 100%;
}

.direction.direction-row-reverse {
    flex-direction: row-reverse;
}

.direction.direction-row {
    flex-direction: row;
}

.col, .direction > div[class*=auto], .direction > div[class*=auto] {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}