Responsive Layout - Trouble clearing floats at multiple breakpoints

Hi there,

I'm having a bit of trouble clearing floats at certain breakpoints so that my unordered list "Portfolio" of list items line up correctly. They contain an image, a title, and a caption below that of a varying heights so that by default float behavior they don't line up quite correctly.

I need a mobile (320px and one column), tablet (768px and two columns), and desktop (1024px and three columns) layout.

The layout part I think I have implemented just fine. Mobile stacks each item on top of one another perfectly. For the tablet it was my understanding that I should clear the left float every (2n+1) child so that after every two items a new "row" starts. For the desktop it was my understanding that I should clear the left float every (3n+1) child so that every three items a new "row" starts. This works fine in each individual case but if I implement all then only the earlier implemented one, in this case mobile, then tablet, then desktop takes precedence even though the other styles in the media query are working.

Here's some code to make it easier:

HTML:

<!-- Portfolio -->
        <section id="portfolio">
          <div class="container clearfix">
            <h2 class="section-name">Portfolio</h2>

            <hr class="section-hr">

            <ul class="portfolio-gallery">

              <li class="portfolio-item">
                <img class="portfolio-img" src="assets/img/portfolio-1.png">
                <h3 class="portfolio-title">Marketing Page</h3>
                <p class="portfolio-info">This project shows the front page of a marketing website meant for a specific business I'm interested in.</p>
              </li>

              <li class="portfolio-item">
                <img class="portfolio-img" src="assets/img/portfolio-2.png">
                <h3 class="portfolio-title">Search Page</h3>
                <p class="portfolio-info">This project searches through a specific database to find information the user is trying to look up.</p>
              </li>

...

            <li class="portfolio-item">
                <img class="portfolio-img" src="assets/img/portfolio-15.png">
                <h3 class="portfolio-title">Mail Server Program</h3>
                <p class="portfolio-info">This program provides full email functionality for you and your small business.</p>
              </li>

            </ul>

          </div>
        </section>

SASS/CSS:

  .portfolio-gallery {
    list-style: none;
    padding: 0;
    margin: 0;
    .portfolio-item {
      float: left;
      width: 95%;
      margin: 2.5%;

      .portfolio-img {
        max-width: 100%;
      }
      .portfolio-title {
        color: $teal;
        text-align: center;
      }
      .portfolio-info {
        color: $charcoal1;
        text-align: center;
        font-weight: 300;
      }
    }

/** ================================================== **/
/**
 =========================
 Media Queries
 =========================
 **/

 /***** Mobile *****/
 @media screen and (min-width: 320px) {
   #header {
     .profile-pic {
       width: 100%;
     }
   }
   #portfolio {
     .portfolio-gallery {
       .portfolio-item {

       }
       .portfolio-item:nth-child(1n+1) {
         clear: left;
       }
     }
   }
 }

@media screen and (min-width: 768px) {
   #portfolio {
     .portfolio-gallery {
       .portfolio-item {
         width: 45%;
       }
       .portfolio-item:nth-child(2n+1) {
         clear: left;
       }
     }
   }
}

@media screen and (min-width: 1024px) {
   #portfolio {
     .portfolio-gallery {
       .portfolio-item {
         width: 28.3333%;
       }
       .portfolio-item:nth-child(3n+1) {
         clear: left;
       }
     }
   }
}

I think that covers most of the code. Anyway, with this code only the nth-child(1n+1) clear is taking effect. If I remove it, then the (2n+1) does, and if I remove that then the (3n+1) does. Each one by itself works perfectly but together I can't figure out why it's not changing right at the breakpoints.