<div class="wrapper">
  <header class="top">
    <h1>Quantity Ordering</h1>
  </header>

  <section class="articles">
    <article>
      <header class="title">
        <h2>Quantity Queries</h2>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A numquam facilis cumque alias autem eum!</p>
    </article>
    <article>
      <header class="title">
        <h2>Sass for “Quantity Queries”</h2>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A numquam facilis cumque alias autem eum!</p>
    </article>
    <article>
      <header class="title">
        <h2>How to use Quantity Queries</h2>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A numquam facilis cumque alias autem eum!</p>
    </article>
    <article>
      <header class="title">
        <h2>Flexbox Presentational Ordering</h2>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A numquam facilis cumque alias autem eum!</p>
    </article>
    <div class="ad">
      <h3>Learn to code here!</h3>
    </div>
  </section>
  <footer>
    <p>Copyright Quantity Ordering 2015</p>
  </footer>
</div>

* {
  box-sizing: border-box;
}

body {
  background: #2D2F36;
  color: white;
}

.wrapper {
  width: 600px;
  margin: 0 auto;
}

header.top {
  background: #F76859;
  padding: 25px 10px;
}

section.articles {
  background: #8E7D88;
  display: flex;
  padding: 10px;
  flex-flow: column wrap;
}

article {
  background: #DCD9DA;
  padding: 10px;
  margin: 10px 0;
  color: #2D2F36;
}

.ad {
  background: #8C90DB;
  color: #2D2F36;
  padding: 25px;
  font-size: 36px;
  text-align: center;
}

footer {
  padding: 10px;
}

/* Quantity Ordering */
/*Put the ad after the first 3 articles*/

section.articles > article:nth-last-child(n+4) ~ .ad {
  order: 2;
}

section.articles > article:nth-child(n+4) {
  order: 3;
}