Dynamic Column css Based On Window Size AngularJs

This may be answered somewhere, but I am unsure of exact terminology as I am new to web development. I am working with a mean.js app and I have a a container that I am filling:

<div class="container-fluid">
  <div class="col-sm-4 col-md-6 col-lg-4">
     <div class="panel" ng-repeat='item in itemList'>
      {{item.content}}
     </div>
  </div>
</div>

But I don't actually want the col sizes to be as specified there. I would like to set the panel sizes to a set size, something like 150px X 150px per panel and I want the rows to fill with columns based on the resolution of the screen. So if the column hits the end of the screen I want it to start a new row only in that case. For example, if I had 10 panels and someone had a window 1500px wide it would only show 1 row, but as they shrunk the window it would readjust until eventually only showing 1 panel per row.

Hopefully this is something that is possible, but any suggestions would be appreciated!

Set display:inline-block for those inner boxes. This will ensure that, the boxes will take all the available space on a row, After that, it will go to the next row

.c-panel {
  width: 150px;
  height: 150px;
  background: red;
  margin: 5px;
  display: inline-block;
}

<div class="container-fluid">
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div>