<div class="container">
<div class="item">
<p class="price">Workshop #1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aperiam similique amet impedit dicta eum dolorem delectus perspiciatis magnam? Voluptate odio facilis at corporis aut et veniam consequatur placeat quis.</p>
</div>
<div class="item">
<p class="price">Workshop #2</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aperiam similique amet impedit dicta eum dolorem delectus perspiciatis magnam? Voluptate odio facilis at corporis aut et veniam consequatur placeat quis.</p>
</div>
<div class="item">
<p class="price">Workshop #3</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aperiam similique amet impedit dicta eum dolorem delectus perspiciatis magnam? Voluptate odio facilis at corporis aut et veniam consequatur placeat quis.</p>
</div>
<div class="item">
<p class="price">Workshop #4</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aperiam similique amet impedit dicta eum dolorem delectus perspiciatis magnam? Voluptate odio facilis at corporis aut et veniam consequatur placeat quis.</p>
</div>
<div class="item">
<p class="price">Workshop #5</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aperiam similique amet impedit dicta eum dolorem delectus perspiciatis magnam? Voluptate odio facilis at corporis aut et veniam consequatur placeat quis.</p>
</div>
<div class="item">
<p class="price">Workshop #6</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aperiam similique amet impedit dicta eum dolorem delectus perspiciatis magnam? Voluptate odio facilis at corporis aut et veniam consequatur placeat quis.</p>
</div>
<div class="item time">
<p class="title">Schedule</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aperiam similique amet impedit dicta eum dolorem delectus perspiciatis magnam? Voluptate odio facilis at corporis aut et veniam consequatur placeat quis.</p>
</div>
</div>
* {
box-sizing: border-box;
}
body {
color: #121212;
font-size: 16px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
background: lightgray;
}
.container {
display: flex;
flex-flow: row wrap;
}
.item {
width: 31.33%;
background: white;
margin: 1%;
padding: 10px;
}
p.price, p.title {
font-size: 36px;
margin-bottom: 0;
}
.time {
background: slategrey;
color: white;
}
// Ordering
.container > .item:nth-last-child(n+3) ~ .time {
order: 2;
}
.container > .item:nth-child(n+3) {
order: 3;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.