jsを使ってDIVをリサイズできるようにする

実現したいこと

bootstrap3のグリッドシステムをjsでリサイズできるようにしたい。
廃止されたframeのような感じ。

発生している問題

参考サイト
上記サイトの通りに記載してみたが、jsが上手く作動しない。
jsが読み込まれていない・・・？

該当のソースコード

html
1<div class="container-fluid">
2  <div class="row resizable-columns">
3    <div class="col-sm-6 resizable">
4      <div class="thumbnail">
5        <div class="caption">
6          <h3>.col-sm-6</h3>
7        </div>
8      </div>
9    </div>
10    <div class="col-sm-6 resizable">
11      <div class="thumbnail">
12        <div class="caption">
13          <h3>.col-sm-6</h3>
14        </div>
15      </div>
16    </div>
17  </div>
18
19  <div class="row resizable-columns">
20    <div class="col-sm-6 resizable">
21      <div class="thumbnail">
22        <div class="caption">
23          <h3>.col-sm-6</h3>
24        </div>
25      </div>
26    </div>
27    <div class="col-sm-6 resizable">
28      <div class="thumbnail">
29        <div class="caption">
30          <h3>.col-sm-6</h3>
31        </div>
32      </div>
33    </div>
34  </div>
35</div>

css
1.ui-resizable-handle {
2  position: absolute;
3  font-size: 0.1px;
4  display: block;
5  touch-action: none;
6  width: 30px;
7  right: -15px;
8}
9.ui-resizable-handle:after {
10  content: "";
11  display: block;
12  position: absolute;
13  top: 50%;
14  left: 50%;
15  transform: translate(-50%, -50%);
16  margin-top: -10px;
17  width: 4px;
18  height: 4px;
19  border-radius: 50%;
20  background: #ddd;
21  box-shadow: 0 10px 0 #ddd, 0 20px 0 #ddd;
22}

js
1$(function() {
2  var
3    resizableEl = $('.resizable').not(':last-child'),
4    columns = 12,
5    fullWidth = resizableEl.parent().width(),
6    columnWidth = fullWidth / columns,
7    totalCol, // this is filled by start event handler
8    updateClass = function(el, col) {
9      el.css('width', ''); // remove width, our class already has it
10      el.removeClass(function(index, className) {
11        return (className.match(/(^|\s)col-\S+/g) || []).join(' ');
12      }).addClass('col-sm-' + col);
13    };
14  // jQuery UI Resizable
15  resizableEl.resizable({
16    handles: 'e',
17    start: function(event, ui) {
18      var
19        target = ui.element,
20        next = target.next(),
21        targetCol = Math.round(target.width() / columnWidth),
22        nextCol = Math.round(next.width() / columnWidth);
23      // set totalColumns globally
24      totalCol = targetCol + nextCol;
25      target.resizable('option', 'minWidth', columnWidth);
26      target.resizable('option', 'maxWidth', ((totalCol - 1) * columnWidth));
27    },
28    resize: function(event, ui) {
29      var
30        target = ui.element,
31        next = target.next(),
32        targetColumnCount = Math.round(target.width() / columnWidth),
33        nextColumnCount = Math.round(next.width() / columnWidth),
34        targetSet = totalCol - nextColumnCount,
35        nextSet = totalCol - targetColumnCount;
36
37      // Just showing class names inside headings
38      target.find('h3').text('col-sm-' + targetSet);
39      next.find('h3').text('col-sm-' + nextSet);
40
41      updateClass(target, targetSet);
42      updateClass(next, nextSet);
43    },
44  });
45});