Как фильтровать/сортировать дивы (пример внутри)??

[SuperGadgets]

Всем привет
Делаю сайт витрину, на очень простой ЦМС на файлах без базы данных. Может кто подскажет скрипт который по клику по кнопке (цена по возростанию/убыванию) будет сортировать ДИВы по цене. Цена прописана в спане tags
<span class="tags">
<a class="label label-rounded label-secondary p-category" href="/tag:8#body-wrapper">8</a>
</span>

Вот кусок с дивами:

<div class="columns">
    <div id="item" class="column col-9 col-md-12 extra-spacing">
       
                <div class="bricklayer">
                                    <div class="card">
            <div class="card-header">
        <div class="card-subtitle text-gray">
            <span class="blog-date">
    <time class="dt-published" datetime="2018-04-17T19:11:16+03:00">
        <i class="fa fa-calendar"></i> 17th Apr 2018
    </time>
</span>
    </div>
        <div class="card-title">
            <h5 class="p-name mt-1"><a href="/blog/product" class="u-url">product 8</a></h5>
        </div>
    </div>
    <div class="card-body">
                    <p><a href="/inj.html">plugin:content-inject</a>
<a href="/inj.html">plugin:page-inject</a></p>
            </div>
    <div class="card-footer">
        <span class="tags">
        <a class="label label-rounded label-secondary p-category" href="/tag:8#body-wrapper">8</a>
    </span>
    </div>
</div>

                                    <div class="card">
            <div class="card-header">
        <div class="card-subtitle text-gray">
            <span class="blog-date">
    <time class="dt-published" datetime="2018-04-17T17:00:08+03:00">
        <i class="fa fa-calendar"></i> 17th Apr 2018
    </time>
</span>
    </div>
        <div class="card-title">
            <h5 class="p-name mt-1"><a href="/blog/product-1" class="u-url">Product 5</a></h5>
        </div>
    </div>
    <div class="card-body">
                   
            </div>
    <div class="card-footer">
        <span class="tags">
        <a class="label label-rounded label-secondary p-category" href="/tag:5#body-wrapper">5</a>
    </span>
    </div>
</div>

                                    <div class="card">
            <div class="card-header">
        <div class="card-subtitle text-gray">
            <span class="blog-date">
    <time class="dt-published" datetime="2018-04-17T17:08:12+03:00">
        <i class="fa fa-calendar"></i> 17th Apr 2018
    </time>
</span>
    </div>
        <div class="card-title">
            <h5 class="p-name mt-1"><a href="/blog/product-4" class="u-url">product 4</a></h5>
        </div>
    </div>
    <div class="card-body">
                   
            </div>
    <div class="card-footer">
        <span class="tags">
        <a class="label label-rounded label-secondary p-category" href="/tag:4#body-wrapper">4</a>
    </span>
    </div>
</div>

                                    <div class="card">
            <div class="card-header">
        <div class="card-subtitle text-gray">
            <span class="blog-date">
    <time class="dt-published" datetime="2018-04-17T17:01:12+03:00">
        <i class="fa fa-calendar"></i> 17th Apr 2018
    </time>
</span>
    </div>
        <div class="card-title">
            <h5 class="p-name mt-1"><a href="/blog/product1" class="u-url">product1</a></h5>
        </div>
    </div>
    <div class="card-body">
                   
            </div>
    <div class="card-footer">
        <span class="tags">
        <a class="label label-rounded label-secondary p-category" href="/tag:1#body-wrapper">1</a>
    </span>
    </div>
</div>

                                    <div class="card">
            <div class="card-header">
        <div class="card-subtitle text-gray">
            <span class="blog-date">
    <time class="dt-published" datetime="2018-04-17T17:05:58+03:00">
        <i class="fa fa-calendar"></i> 17th Apr 2018
    </time>
</span>
    </div>
        <div class="card-title">
            <h5 class="p-name mt-1"><a href="/blog/produkt-2" class="u-url">produkt 2</a></h5>
        </div>
    </div>
    <div class="card-body">
                   
            </div>
    <div class="card-footer">
        <span class="tags">
        <a class="label label-rounded label-secondary p-category" href="/tag:2#body-wrapper">2</a>
    </span>
    </div>
</div>

                                </div>

               
                </div>

 

[Absolute]

На jQuery примерно так:

$(document).ready(function(){
var el = $('.card');
  var sortButton = $('<a />', {
    text : 'По позрастанию/убыванию',
    href : '#',
    click : function(){
      var $t = $(this);
      if($t.data('c') === undefined || $t.data('c') === false){
        $t.data('c', true);
      } else {
        $t.data('c', false);
      }
     el.sort(function(a,b){
       var ap = parseFloat($(a).find('.tags a').text()),
           bp = parseFloat($(b).find('.tags a').text()),
           c = $t.data('c') ? 1 : -1;
       if(ap < bp){
         return -c;
       }
       if(ap > bp){
         return c;
       }
       return 0;
     });
     el.parent().append(el);     
    }
  });
el.parent().prepend(sortButton);
});

 

[Polynom]

Для просмотра ссылки Войди или Зарегистрируйся поможет визуально сортировать div