Flexbox Styled Grid List

grid-list.scss

.grid-list{
	display: flex;
	width: 100%;

	&:nth-child(even){
		flex-direction: row-reverse;
	}

	.h4{
		background: $color-p1;
		color: $color-white;
	}

	dt, dd{
		flex: 1;
		box-sizing: border-box;
		text-align: center;
		align-items: center;
		width: 100%;
		padding: 40px 10%;
	}

	dd{
		text-align: left;
		background: $color-white;
		display: flex;
	}

}

@media screen and (min-width: 700px){
	
	.grid-list{
		> span{
			flex: 1;

			&:last-child{
				background: $color-white;
			}
		}

		dt, dd{
			padding: 5%;
			max-width: 400px;
			width: 50vw;
			box-sizing: border-box;
			max-width: 400px;
		}
	}

}

@media screen and (min-width: 1024px){

	.grid-list{

		dt, dd{
			padding: 4em 3%;
		}
	}
	
}

index.html

<section class="page-section grid-list-container is-full-bleed">

		<dl>
			<div class="grid-list">
				<span></span>
				<dt>Item 1</dt>
				<dd>Item 1 description.</dd>
				<span></span>
			</div>
		
			<div class="grid-list">
				<span></span>
				<dt>Item 2</dt>
				<dd>Item 2 description.</dd>
				<span></span>
			</div>
		
			<div class="grid-list">
				<span></span>
				<dt>Item 3</dt>
				<dd>Item 3 Description.</dd>
				<span></span>
			</div>
		</dl>

</section>

layout.scss

.clearfix{
	zoom: 1;
	
	&:after{
		content: '';
		height: 0;
		visibility: hidden;
		display: block;
		clear: both;
	}
}

.page-section{
	max-width: 1024px;
	margin: 0 auto;
	@extend .clearfix;
	box-sizing: border-box;

	&.is-full-bleed{
		max-width: 100%;
	}

	.bg-gray{
		background: #333;
		width: 100vw;
		margin-left: -10vw;
		padding: 2em 10vw;
		box-sizing: border-box;
		margin-bottom: 1em;
		margin-top: -2.5em;
	}

	&.grid-list-container{
		padding-top: 4em;
	}
	
}