.row {
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
	margin-right: -$gutter / 2;
	margin-left: -$gutter / 2;
	flex: 0 1 auto;
	flex-wrap: wrap;

	@include clearfix;

	// columns don't stack
	&.nowrap {
		flex-wrap: nowrap;
	}

	// justification options
	&.justify-start {
		justify-content: flex-start;
	}

	&.justify-end {
		justify-content: flex-end;
	}

	&.justify-center {
		justify-content: center;
	}

	&.justify-between {
		justify-content: space-between;
	}

	&.justify-around {
		justify-content: space-around;
	}

	// order options
	&.reverse {
		flex-direction: row-reverse;
	}

	// align items vertically
	&.align-top {
		align-items: flex-start;
	}

	&.align-bottom {
		align-items: flex-end;
	}

	&.align-middle {
		align-items: center;
	}

	&.align-baseline {
		align-items: baseline;
	}

	&.align-stretch {
		align-items: stretch;
	}

	// define flex items if no column width
	.flex-item {
		flex: 0 0 auto;

		&.grow {
			flex-grow: 1;
		}
	}
}

[class^='col-'],
[class*=' col-'] {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-height: 1px;
	padding-right: $gutter / 2;
	padding-left: $gutter / 2;
	flex: 0 0 auto;
}

@for $i from 1 through $columns {
	.col-xs-#{$i} {
		width: percentage($i / $columns);
	}
}

$breakpoint-counter: 0;

@each $breakpoint, $val in $breakpoints {
	$breakpoint-counter: $breakpoint-counter + 1;

	@media (min-width: $val) {
		@for $i from 1 through $columns {
			.col-#{$breakpoint}-#{$i} {
				max-width: percentage($i / $columns);
				flex: 0 0 percentage($i / $columns);
			}
		}

		@each $modifier in pull, push {
			@for $i from 0 through $columns {
				.col-#{$breakpoint}-#{$modifier}-#{$i} {
					@include make-col-modifier($modifier, $i, $columns);
				}
			}
		}

		@for $i from 0 through $columns - 1 {
			@if $breakpoint-counter != 1 or $i != 0 {
				// Avoid emitting useless .offset-xs-0
				.col-#{$breakpoint}-offset-#{$i} {
					@include make-col-modifier(offset, $i, $columns);
				}
			}
		}
	}
}