I know some similar questions have been asked on creating equal height columns, but I'm not using a table, and working just in CSS. I've done a lot of research on flexbox but my code is not working.
I'm trying to place the articles into two or three equal width columns using Media Queries. With this code, they stay in one column. The way I tried to do it is to set a max-width for the container, and then have the articles wrap, but I wasn't able to get it to work. 

```
<div id="content"><!-- Start content -->
         <div id="slide">             <img src="imgs/slide.jpg" alt="The University of Arizona " />
         </div>
         <section id="recent">
            <article>
               <a href="#"><img src="imgs/recent1.jpg" alt="OSIRIS-REx: Tapping Asteroid RQ36" /></a>
               <h1><a href="#">OSIRIS-REx: Tapping Asteroid RQ36</a></h1>
               <p>Asteroid 1999 RQ36 is 575 meters around and passes near Earth every six years. Not only does it potentially house organic compounds that may have been the precursors to life; it could impact us in 2182. The OSIRIS-REx mission, sponsored by NASA and led by Dante Lauretta, Ph.D., professor in the Lunar and Planetary Sciences Laboratory, aims to pay RQ36 a visit to learn more - and bring a sample back to Earth.</p>
               <a class="readMore" href="#">Read More</a>
            </article>
            <article>
               <a href="#"><img src="imgs/recent2.jpg" alt="Ethics and the Bottom Line" /></a>
               <h1><a href="#">Ethics and the Bottom Line</a></h1>
               <p>With media so focused on corporate wrongdoing, it's good to know that the Eller College of Management is taking a proactive route to turn things around. The College's Center for Leadership Ethics has initiated High School Ethics Forums that provide teen participants hands-on experiences for dealing with personal and professional ethical dilemmas. The goal? Ensure ethics are integral part of the next generation's corporate culture.</p>
               <a class="readMore" href="#">Read More</a>
            </article>
            <article>
               <a href="#"><img src="imgs/recent3.jpg" alt="From Fields to Fuel" /></a>
               <h1><a href="#">From Fields to Fuel</a></h1>
               <p>Developing alternative, sustainable energy sources is essential to the future of Arizona, the nation and the world. At the UA, researchers in the College of Agriculture and Life Sciences are studying how to optimize sweet sorghum as a bio-fuel crop. The work brings together students and professors, government and industry, and represents an education for all involved.</p>
               <a class="readMore" href="#">Read More</a>
            </article>
            <article>
               <a href="#"><img src="imgs/recent4.jpg" alt="Rodriguez Era Begins" /></a>
               <h1><a href="#">Rodriguez Era Begins</a></h1>
               <p>On November 22, 2011, Richard Rodriguez, most recently serving as head coach for Michigan from 2008 to 2010 and an analyst for CBS Sports, became the 30th head coach of the Arizona Wildcats football team. "I'm eager to get back to coaching and look forward to becoming part of the Arizona family," he says. "I believe that outstanding success is on the horizon for Arizona Football."</p>
               <a class="readMore" href="#">Read More</a>
            </article>
         </section>

```

This is the snippet of CSS that I am having trouble with 

```
/*Keep header image large*/
#slide img 
{
   max-width: 400px;
   padding-top:5%;
}

#recent {
    overflow:auto;
}

#content {
    margin:5%;
}

/*articles into two columns*/
#recent article, img
{
    display: -webkit-flex;
   display: flex;
   flex-direction:column;
   flex-wrap:wrap; 
   column-gap:3em;
   margin:1%;
   width:100%;
   overflow:auto;
   columns:3;

}

#recent article {
    width:200px;
   height:600px;
}

```