<!--Flexbox brick quotes. Stack on mobile, equal vertical heights on desktop -->

<div class="flex-quotes">
    <div class="col col-image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/280406/seattle-botanical-gardens.jpg);">
        &nbsp;
    </div>

    <div class="col col-text">
        <p>&ldquo;I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.&rdquo;
            <cite>- Maya Angelou</cite>
        </p>
    </div>
</div>


<div class="flex-quotes">
    <div class="col col-image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/280406/seattle-library-sm.jpg);">
        &nbsp;
    </div>
    <div class="col col-text col-left">
        <p>&ldquo;Simple is good.&rdquo;
            <cite>- Jim Henson</cite>
        </p>
    </div>
</div>


<div class="flex-quotes">
    <div class="col col-image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/280406/seattle-skylight-sm.jpg);">
        &nbsp;
    </div>
    <div class="col col-text">
        <p>&ldquo;Everybody has a plan until they get punched in the mouth.&rdquo;
            <cite>- Mike Tyson</cite>
        </p>
    </div>
</div>


<div class="flex-quotes">
    <div class="col col-image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/280406/madison-overture.jpg);">
        &nbsp;
    </div>
    <div class="col col-text col-left">
        <p>&ldquo;We are what we pretend to be, so we must be careful about what we pretend to be&rdquo;
            <cite>- Kurt Vonnegut, Jr.</cite>
        </p>
    </div>
</div>


<div class="flex-quotes">
    <div class="col col-image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/280406/madison-rainbow.jpg);">
        &nbsp;
    </div>
    <div class="col col-text">
        <p>&ldquo;Perfect is the enemy of good.&rdquo;
            <cite> - Voltaire</cite>
        </p>
    </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Merriweather:400,700italic,700,400italic);

$bg-color: #333;
$text-color: #FFF;
$border-color: #FFF;
$color-primary: #458599;

body {
	background-color: $bg-color;
	color: $text-color;
	font-family: 'Merriweather', serif;
	font-size: 1.2em;
	line-height: 1.5em;
	letter-spacing: 1px;
}

cite {
	font-weight: 700;
}

.col-text {
	background-color: $color-primary;
}

.flex-quotes {
	display: flex;
	flex-grow: 1;
	border-bottom: 4px solid $border-color;
}
.col {
	flex: 1
}

.col-text {
	flex: 1.5;
	@media (min-width: 640px){
		border-left: 4px solid $border-color;
	}
}

.col-left {
	order: -1; 
	@media (min-width: 640px){
		border-left: none;
		border-right: 4px solid $border-color;
	}
}

.col-text p {
	padding: 2em;
	margin: 0;
}

.col-image {
	display: none;
	@media (min-width: 640px){
		display: flex;
		background-size: cover;
	}
}