portfolio layout

So I am working on revamping my portfolio site and thinking I want to go with a layout sort of like that I have in this codepen

http://codepen.io/johnweland/pen/LEzYEX

where the over view shows a cover art/icon/featured image whatever you want to call it. That image takes up 100% of the .portfolio__item container and then within that container have a title at the top set of spans at the bottom that show what skill-sets were used for that project "CSS, Sass, LESS, WordPress, Android" etc. much like treehouse divides up their courses in the library.

clicking on a particular portfolio item would take the user to that pieces page which would have all the info they'd wants like what was done, why it was done, links to the site/project in the wild, link to the repo if its something I did that is meant to be open... right now I am defining a min and max height and widths per portfolio__item that are the same but I think to make it responsive I need to make those dynamic with media queries so they flex to some degree but don't drop under a minimum if at their minimums they don't all fit on the screen in a row, then break to the next line.

The problem with grids like bootstrap is they have no minimum/maximum per element that I can tell so they just continue to squish until you define another media query for example .col-xs-2 or .col-sm-4 which is a bummer because its targeting device instead of browser space.

I am designing the whole thing in CSS and then I'll go back and use Sass to clean up the code. I'm going to be using the BEM naming convention.

Guil Hernandez what do you think? Whats the best way to approach this.

Any guidance is appreciated.

edit: I should add that the problem with doing it my current way is that there is a big margin on the right between breaks.