title: Getting a responsive three column grid to stack to two columns at certain breakpoint
body: <p>I'm re-building my site a bit, changing a few things and this time am attempting to use some slightly different frameworks including a different CSS grid system - but I have a run into a similar problem I had building my site last time with getting the grid columns containing my portfolio items to stack/collapse properly at a certain screen size/breakpoint.</p>
  
  <p>I have a test page set up here: </p>
  
  <p><a href="http://samnorris.co.nz/test/index.html" rel="nofollow noreferrer">http://samnorris.co.nz/test/index.html</a></p>
  
  <p>Specifically, I am trying to get the three columns containing the hexagon-shaped portfolio div's to stack into two columns (2 items per row) at tablet screen-size.</p>
  
  <p>Last time I achieved this surprisingly rather easily by changing the .work-grid class applied on each of the hexagon divs to from to width: 50% and float: left under a tablet screen-size media query breakpoint (@media only screen and (max-width: 56.25em)  or @media only screen and (max-width: 908px) for example)</p>
  
  <p>for example, as so:</p>
  
  <pre><code>@media only screen and (max-width: 908px) {
  
  .work-grid {
      width: 50%;
      float: left;
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 10px;
      margin-bottom: 10px;
  }
  }
  </code></pre>
  
  <p>but this doesn't seem to work using the different grid framework I'm using this time (which is <a href="http://www.columnal.com/" rel="nofollow noreferrer">Columnal</a> btw, if it matters...there isn't really any documentation for it to speak of at all either) Not sure if it's the way it handles rows differently or if there is simply something else I'm missing, but this is what is happening using the above code:</p>
  
  <p><img src="https://i.stack.imgur.com/2LSi3.jpg" alt="enter image description here"></p>
  
  <p>Can anyone please help me understand what I need to do to get these columns to stack properly from three columns to two at the tablet-size breakpoint? (as they do on my <a href="http://www.samnorris.co.nz" rel="nofollow noreferrer">main/current layout</a> for example)</p>