jQuery Filtering & Bootstrap Rows

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
  <main>
    <div class="container-fluid">
      <div class="text-center container choose-category">
        <button class="btn btn-blue btn-show-all" id="all">Alle anzeigen</button>
        <p class="categories">
          <button class="btn btn-link" id="website">Website</button>
          <button class="btn btn-link" id="onlineshop">Online-Shop</button>
        </p>
      </div>
      <div id="actual-projects">
        <div class="container-fluid">
          <div id="parent">
            <div class="row row-striped">
              <div class="website col-project col-md-6 col-lg-6 col-sm-6 col-xs-12">
                <div class="description">
                  <h3 class="blue">Projekt A</h3>
                  <p>
                    Description
                  </p>
                </div>
              </div>
              <div class="onlineshop col-project col-md-6 col-lg-6 col-sm-6 col-xs-12">
                <div class="description">
                  <h3 class="blue">Projekt B</h3>
                  <p>
                    Description
                  </p>
                </div>
              </div>
              <div class="onlineshop website col-project col-md-6 col-lg-6 col-sm-6 col-xs-12">
                <div class="description">
                  <h3 class="blue">Projekt C</h3>
                  <p>
                    Description
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</body>

SCSS

.btn-show-all {
  margin-bottom: 2em;
}

#actual-projects {
  margin-top: 5%;
  margin-bottom: 5%;
  .blue {
    text-transform: uppercase;
  }
  p {
    font-size: large;
    color: #6a747c;
  }
  .description {
    background: transparent !important;
  }
  .col-project {
    padding: 5%;
  }
}

.categories {
  button {
    font-size: x-large;
    color: #6a747c;
    text-decoration: none;
    &:hover {
      color: #6a747c;
      text-decoration: none;
    }
    &.active {
      color: #00add0;
    }
  }
}

.choose-category {
  margin-top: 3em;
}

.row-striped {
  margin-left: -30px;
  margin-right: -30px;
  padding-left: 5%;
  padding-right: 5%;
}

@media (min-width: 1280px) {
  .row-striped:nth-of-type(odd) {
    background-color: #fff;
  }
  .row-striped:nth-of-type(even) {
    background-color: #00add0;
  }
}

JavaScript

function alignDivs() {
	  var $mainElem = $('.row.row-striped'),
	    $parent = $mainElem.parent(), // div#parent
	    $items = $mainElem.children(':gt(1)').detach(); // detach all +1 items

	  if ($items.length) {
	    for (var i = 0; i < $items.length; i = i + 2) { // 2 items per row
	      var $row = $('<div class="row row-striped">').append($items.slice(i, i + 2));
	      // new row with previously detached items
	      $parent.append($row);
	    }
	  }
	}

	alignDivs(); //initially align cols/rows

	$(document).ready(function() {
	  var $btns = $('.btn').click(function() {
	    if (this.id === 'all') {
	      $('#parent').find('> .row > div').fadeIn(450);
	      alignDivs(); //reload col/row layout
	    } else {
	      var $el = $('.' + this.id).fadeIn(450);
	      $('#parent').find('> .row > div').not($el).hide();
	      alignDivs(); //reload col/row layout
	    }
	    $btns.removeClass('active');
	    $(this).addClass('active');

	  });
	});