<div class="container">
  <select class="b-select">
    <option disabled selected>Sort By</option>
    <option data-sort="price:asc">Price Ascending</option>
    <option data-sort="price:desc">Price Descending</option>
    <option data-sort="length:asc">Length Ascending</option>
    <option data-sort="length:desc">Length Descending</option>
  </select>

  <ul class="boxes">
    <li data-length="13" data-price="670">
      <a href="#">
        Box1
        <div class="details">
          <span class="length">13M</span>
          <span class="price">670€</span>
        </div>
      </a>
    </li>
    <li data-length="5" data-price="220">
      <a href="#">
        Box2
        <div class="details">
          <span class="length">5M</span>
          <span class="price">220€</span>
        </div>
      </a>
    </li>
    <li data-length="4" data-price="319">
      <a href="#">
        Box3
        <div class="details">
          <span class="length">4M</span>
          <span class="price">319€</span>
        </div>
      </a>
    </li>
    <li data-length="14" data-price="420">
      <a href="#">
        Box4
        <div class="details">
          <span class="length">14M</span>
          <span class="price">420€</span>
        </div>
      </a>
    </li>
    <li data-length="3" data-price="180">
      <a href="#">
        Box5
        <div class="details">
          <span class="length">3M</span>
          <span class="price">180€</span>
        </div>
      </a>
    </li>
    <li data-length="6" data-price="100">
      <a href="#">
        Box6
        <div class="details">
          <span class="length">6M</span>
          <span class="price">100€</span>
        </div>
      </a>
    </li>
    <li data-length="7" data-price="175">
      <a href="#">
        Box7
        <div class="details">
          <span class="length">7M</span>
          <span class="price">175€</span>
        </div>
      </a>
    </li>
    <li data-length="9" data-price="615">
      <a href="#">
        Box8
        <div class="details">
          <span class="length">9M</span>
          <span class="price">615€</span>
        </div>
      </a>
    </li>
    <li data-length="16" data-price="749">
      <a href="#">
        Box9
        <div class="details">
          <span class="length">16M</span>
          <span class="price">749€</span>
        </div>
      </a>
    </li>
    <li data-length="12" data-price="315">
      <a href="#">
        Box10
        <div class="details">
          <span class="length">12M</span>
          <span class="price">315€</span>
        </div>
      </a>
    </li>
    <li data-length="17" data-price="295">
      <a href="#">
        Box11
        <div class="details">
          <span class="length">17M</span>
          <span class="price">295€</span>
        </div>
      </a>
    </li>
    <li data-length="11" data-price="227">
      <a href="#">
        Box12
        <div class="details">
          <span class="length">11M</span>
          <span class="price">227€</span>
        </div>
      </a>
    </li>
  </ul>
</div>

body {
  font: 16px "Helvetica Neue", sans-serif;
  background: #473CB6; 
  color: #fff;
  padding: 50px 0;
}

.container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}

.boxes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 -10px;
}

.boxes li {
  width: 25%;
  padding: 0 10px;
  margin-top: 20px;
  box-sizing: border-box;
}

.boxes li a {
  display: block;
  padding: 8px;
  text-align: center;
  text-decoration: none;
  background: #fff000;
  color: #000;
}

.boxes li a:focus {
  outline: 5px solid red;
}

.boxes .details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}

.boxes .details span {
  font-size: .8rem;
}

.boxes .details .length {
  margin-right: 10px;
}

.boxes .details span:before {
  content: '•';
  padding-right: 3px;
}

(function($) {
  "use strict";

  $.fn.numericFlexboxSorting = function(options) {
    const settings = $.extend({
      elToSort: ".boxes li"
    }, options);

    const $select = this;
    const ascOrder = (a, b) => a - b;
    const descOrder = (a, b) => b - a;

    $select.on("change", () => {
      const selectedOption = $select.find("option:selected").attr("data-sort");
      sortColumns(settings.elToSort, selectedOption);
    });

    function sortColumns(el, opt) {
      const attr = "data-" + opt.split(":")[0];
      const sortMethod = (opt.includes("asc")) ? ascOrder : descOrder;
      const sign = (opt.includes("asc")) ? "" : "-";

      const sortArray = $(el).map((i, el) => $(el).attr(attr)).sort(sortMethod);

      for (let i = 0; i < sortArray.length; i++) {
        $(el).filter(`[${attr}="${sortArray[i]}"]`).css("order", sign + sortArray[i]);
      }
    }

    return $select;
  };
})(jQuery);

// call the plugin
$(".b-select").numericFlexboxSorting();