@import "variables"; @import "mixins"; // Container widths .container { @include make-container(); @include make-container-max-widths(); } // Fluid container .container-fluid { @include make-container(); } // Row .row { &.tm_pb_col_padding_reset{ margin-left: 0; margin-right: 0; .tm_pb_column{ padding-left: 0; padding-right: 0; } } @include make-row(); } // Columns @include make-grid-columns(); // Flex column reordering @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { .col-#{$breakpoint}-first { order: -1; } .col-#{$breakpoint}-last { order: 1; } } } // Alignment for every column in row @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { .row-#{$breakpoint}-top { align-items: flex-start; } .row-#{$breakpoint}-center { align-items: center; } .row-#{$breakpoint}-bottom { align-items: flex-end; } } } // Alignment per column @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { .col-#{$breakpoint}-top { align-self: flex-start; } .col-#{$breakpoint}-center { align-self: center; } .col-#{$breakpoint}-bottom { align-self: flex-end; } } }