Flex Direction Utilities

.flex-row { flex-direction: row }
.flex-row-reverse { flex-direction: row-reverse }
.flex-col { flex-direction: column }
.flex-col-reverse { flex-direction: column-reverse }

@media screen and (min-width:  576px) {
  .sm:flex-row { flex-direction: row }
  .sm:flex-row-reverse { flex-direction: row-reverse }
  .sm:flex-col { flex-direction: column }
  .sm:flex-col-reverse { flex-direction: column-reverse }
}

@media screen and (min-width:  768px) {
  .md:flex-row { flex-direction: row }
  .md:flex-row-reverse { flex-direction: row-reverse }
  .md:flex-col { flex-direction: column }
  .md:flex-col-reverse { flex-direction: column-reverse }
}

@media screen and (min-width:  992px) {
  .lg:flex-row { flex-direction: row }
  .lg:flex-row-reverse { flex-direction: row-reverse }
  .lg:flex-col { flex-direction: column }
  .lg:flex-col-reverse { flex-direction: column-reverse }
}

@media screen and (min-width:  1200px) {
  .xl:flex-row { flex-direction: row }
  .xl:flex-row-reverse { flex-direction: row-reverse }
  .xl:flex-col { flex-direction: column }
  .xl:flex-col-reverse { flex-direction: column-reverse }
}