2 x 50% Divs Flexbox LAyout

Currently trying to integrate flexbox into my current site layout.

I have 2 flexbox divs side by side. Left and Right.

Left contains text information titles. Right contains an image.

Codepen Example: http://codepen.io/Davabo/pen/vKKpWE

I cannot figure out why my divs don't wrap to the next line on browser resize.

I would like the divs to be a side by side row until the viewport gets smaller then 768px. Then I would like the divs to stack, and the right div to be above the left div.

I have tried many different variations of flex-wrap, flex-direction, flex-flow and I cannot seem to get them to wrap.

Any help would be amazing, thank you.

* {
  margin: 0;
}
.blog {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.left {
  flex: 1;
  height: auto;
  background-color: red;
  
  .entry {
    h2, p {
      text-align: center;
      padding: 20px;
    }
  }
  ;
}
.right {
  flex: 1;
  height: auto;
  background-color: green;
}

<section class="blog">

  <div class="left">
    <div class="entry">
      <h2>Title</h2>
      <p>Date</p>

      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, dolorem explicabo, odit mollitia nulla voluptatem nihil sapiente? Totam dicta, perspiciatis odit porro iusto reiciendis omnis suscipit minima necessitatibus natus! Dolore quidem distinctio
          aperiam praesentium cumque sed vero odit ipsam id neque numquam rem maiores ratione, tenetur aut laboriosam, quae hic ut, deserunt accusantium nemo? Ut explicabo delectus harum natus ad facere officiis tempora ex dolore reprehenderit expedita,
          non vitae, laborum rem itaque nulla! Perspiciatis neque rem corrupti maiores dolore? Dicta voluptatum neque quasi, consequuntur. Aliquid voluptas adipisci distinctio suscipit laboriosam eius libero nam numquam. Expedita assumenda labore quae,
          mollitia voluptatibus fugit exercitationem quo. Ipsam officia nulla temporibus asperiores velit distinctio, exercitationem quae qui necessitatibus delectus aut magni aliquid repellendus odit mollitia eaque eum. Porro repellendus vero, aut iste
          harum, exercitationem fuga debitis culpa. Harum vel tempore unde asperiores nostrum, repellendus eum in architecto non voluptatem assumenda mollitia beatae necessitatibus nisi, laborum distinctio, ullam illo optio amet porro quisquam eius aut
          facilis. Fuga minus modi aliquam distinctio dicta fugit sed cum! Iusto necessitatibus odit minima aspernatur possimus vel ullam, ipsam quas. Vitae, aliquam doloremque! Aspernatur ea, error facilis, consectetur nobis libero asperiores porro,
          deserunt id aut, blanditiis alias nesciunt inventore perspiciatis consequatur praesentium ipsa dolores rerum est voluptate mollitia provident eius. Tempore quia eaque itaque rerum eum ut minima, magni ab deserunt, molestias distinctio sequi
          velit ex. Illum, praesentium alias nemo id quod quam veritatis ratione nisi esse quis laudantium iusto molestias, at. Corrupti nulla deleniti culpa quo voluptatibus quaerat unde delectus voluptatum nisi impedit, inventore dolorum repellat. Quos
          inventore, odit consequatur cumque laudantium eius sint suscipit a, ab corrupti aut quo nemo vero. Voluptatum reprehenderit unde cupiditate provident maxime a, sapiente nam, enim, eveniet eaque error autem impedit officiis nisi distinctio voluptate
          deserunt, dolorum. Consequatur officia corporis nesciunt incidunt cupiditate, rerum quae nostrum totam, quaerat similique saepe neque alias fugiat in nulla perferendis magni, mollitia voluptas doloremque nam et tempora. Illo in libero dignissimos
          voluptatum ut aperiam repellendus nisi distinctio totam incidunt. Perspiciatis animi, quidem rem. Illo praesentium voluptates veniam omnis ducimus magnam facere porro eveniet corporis alias vitae consectetur fugit eligendi, cumque vel impedit
          temporibus, enim similique qui aliquid consequatur consequuntur et atque dicta. Ratione, perspiciatis quia voluptatum officiis ab necessitatibus quas eum laudantium in aliquam optio, possimus incidunt dignissimos obcaecati fugit libero et, ex
          deserunt molestiae, totam recusandae harum quasi debitis. Nobis libero recusandae expedita, dolorem debitis eligendi? Cumque praesentium quam eum, sunt harum nemo voluptas cum tempora dolorem aspernatur, quis inventore dolor accusantium qui
          exercitationem maiores officia totam, repellendus autem. Error laboriosam quibusdam, dolorum quisquam, tempore ipsum a tempora totam nam cumque ad assumenda. Recusandae ratione inventore reprehenderit, necessitatibus illo, culpa vel in omnis
          debitis neque doloremque cumque, aperiam id tenetur molestias laboriosam eum dolorum, itaque similique ex deserunt quae mollitia tempore velit earum? Deserunt soluta nulla tempora iure ipsa, maiores harum similique nesciunt eius culpa alias
          reiciendis, commodi quisquam aliquam tempore molestias distinctio iusto laboriosam autem consequatur molestiae. Voluptatum consequatur quaerat nulla dolor magni accusantium totam.</p>
      </div>
      <!-- content div -->

    </div>
    <!-- entry div -->
  </div>
  <!-- left div -->

  <div class="right"></div>

</section>