How can I reorder divs within this container that I am looping over?

jQuery(document).ready(function($) {

  if ($('.category-sidebar')) {

    var $filterWrap = $('#filter-wrapper .filter-container');

    $('#narrow-by-list').empty();

    $filterWrap.each(function (index) {
      var $currFilter = $(this);
      var $divParent = $currFilter.closest('.filter-container');
      var divHeader = $currFilter.find('.toggle-category-header').text().trim();

      /*if (divHeader === 'Color') {
        $divParent.appendTo('#narrow-by-list');
      } else if (divHeader === 'Clothes Size') {
        $divParent.appendTo('#narrow-by-list');
      } else if (divHeader === 'Price') {
        $divParent.appendTo('#narrow-by-list');
      } else if (divHeader === 'Product Type') {
      } else if (divHeader === 'Shop By Figure') {
      }*/

      switch (divHeader)
      {
        case 'Color':   
        case 'Clothes Size':         
        case 'Price':
          $divParent.appendTo('#narrow-by-list');
          break;
        case 'Product Type': 
        case 'Shop By Figure':          
          $divParent.appendTo('#narrow-by-list :last-child');
          break;
      } 
    });
  }

});

• $filterWrap is the container that hold five side navbar items that are all divs

• #narrow-by-list is tag that holds #filterwrapper which holds all 5 divs

• I want to be able to reorder the divs and place them inside the same container so right now they are:

• Color

• Shop By Figure

• Product Type

• Clothes Size

• Price

I want the list of divs to be reordered to:

• Colour
• Size
• Price
• Product Type
• Shop By Figure

The code above sorts the first three but can’t get the last two sorted. Can you guys help?