Equal column height in multi-column responsive design

I have a responsive grid layout that works fine, except that the line wrapping of the DIVs gets screwed up depending on the horizontal viewport size. The root cause is the variable height of the DIVs.

<style>
div {
    box-sizing: border-box;
}
/*  SECTIONS  */
 .section {
    clear: both;
    padding: 0px;
    margin: 0px;
}
/*  COLUMN SETUP  */
 .col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child {
    margin-left: 0;
}
/*  GROUPING  */
 .group:before, .group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1;
    /* For IE 6/7 */
    background-color: #F5F0E4;
}
/*  GO FULL WIDTH AT LESS THAN 720 PIXELS */
 .col {
    margin: 1% 0 1% 0%;
    border: 1px solid red;
}
.span_3_of_3, .span_2_of_3, .span_1_of_3 {
    width: 100%;
}
/*  GRID OF TWO  */
 @media only screen and (min-width: 720px) {
    .span_2_of_3 {
        width: 100%;
    }
    .span_1_of_3 {
        width: 50%;
    }
}
/*  GRID OF THREE  */
 @media only screen and (min-width: 1024px) {
    .span_3_of_3 {
        width: 100%;
    }
    .span_2_of_3 {
        width: 66.6%;
    }
    .span_1_of_3 {
        width: 33.3%;
    }
}
.content {
    padding: 0px 15px;
    margin-bottom: 15px;
}
</style>

<div class="section group">
    <div class="col span_1_of_3 content">
         <h2>Scuba Diving</h2>

        <p>Learn scuba diving, get certified and enjoy the numerous wonders that lay below the surface of the warm and clear Caribbean waters. The coral around Las Galeras is still very much alive, so you can see coral gardens, coral labyrinth, caves, walls, and even a shipwreck. Among the rich marine life are turtles, rays, giant barracudas, colored tropical fish and a lot of other local fauna.
            <br/>Diving in Las Galeras is a lot of fun!
            <br/>Recommendable operators in Las Galeras include <a href="http://ift.tt/1GTH62T">Las Galeras Divers</a> and <a href="http://ift.tt/1HnZz9d">Playita Sub</a>.</p>
    </div>
    <div class="col span_1_of_3 content">
         <h2>Horseback riding</h2>

        <p>Discover beautiful beaches, lush tropical vegetation, amazing views and local lifestyle on horseback. It's an eco-friendly and relaxing way to see things off the beaten track.
            <br/>Popular trips to the beach include famous Playa Rincón and the hidden gem of Playa Madama. Trips into the hills include the watch tower of Punto and a visit to one of the nearby mountain villages.
            <br/>Several local outfitters have been around for a long time and have horses for every rider level. Check out <a href="http://ift.tt/1GTH7nB">Rudy's Rancho</a> and <a href="http://ift.tt/1HnZz9f">La Hacienda Hostal Ranch</a>.</p>
    </div>
    <div class="col span_1_of_3 content">
         <h2>Whale Watching</h2>

        <p>From mid January to the end of March the humpback whales gather in the Samana Bay to give birth and mate. The opportunity to see the whales perform their breathtaking maneuvers as the males compete for the females should not be missed. Numerous respectable tour operators in Las Galeras and Samaná offer excursions, including Dario Pérez, <a href="http://ift.tt/1GTH62X">Joël y Ludi Excursions</a>, <a href="http://ift.tt/1HnZz9h">Whale Samana</a> and <a href="http://ift.tt/1GTH62Z">Samana Tours</a>.</p>
    </div>
    <div class="col span_1_of_3 content">
         <h2>Zip Line Adventure</h2>

        <p>About an hour from Las Galeras you find the best adrenalin-rush activity in the Dominican Republic. <a href="http://ift.tt/1HnZBhw">Samaná Zip Line</a> offers a spectacular zip line experience through dense tropical forest at speeds of up to 40mph. The less daring in your group can hike up to the Lulu Waterfall to watch the more adventurous zip by.</p>
    </div>
    <div class="col span_1_of_3 content">
         <h2>Los Haitises National Park</h2>

        <p>One of the largest and most bio­di­verse national parks in the Caribbean is right out­side of our doorstep. The impres­sive man­grove forests, a rich vari­ety of birds and ancient caves are all on the menu when you book an excur­sion with one of the numer­ous tour oper­a­tors in Las Galeras or Samaná.</p>
    </div>
    <div class="col span_1_of_3 content">
         <h2>El Limón Waterfall</h2>

        <p>Immersed in a lush trop­i­cal for­est about an hour away lies Salto El Limón. An expe­ri­ence that will bring you over the edge of a breath­tak­ing 55 meter water­fall. To add to the adven­ture, get there on horse­back and take a dive in the refresh­ing crys­talline waters of the nat­ural pool.</p>
    </div>
</div>

The following fiddle contains the above code: http://ift.tt/1GTH631

You'll see that if you make the viewport wide enough to fit 3 columns, the second row of DIVs is messed up -- the DIV for "Zip Line Adventures" is positioned in the third column instead of the first one.

Basically what I'm looking for is a CSS-only solution where the DIVs can be variable height, but that all DIVs within the same row adjust their height according to the tallest one in that row. The result should be a grid of 1x6 (narrowest), 2x3 (medium) or 3x2 (widest).

Note that the basis for the responsive multi-column solution comes from The Responsive Grid System

I'm trying to get a grip on some basics of responsive design, but this issue seems to be beyond my current abilities, so any help is greatly appreciated.