Bootstrap Tab Responsive

I have some tabs and I want to leave responsive. I found an example in codepen, using version 3.3 of Bootstrap. In the project I'm working on, they used 4.0.0-alpha-6.

NOTE: VISUALIZE WITH THE SCREEN LESS THAN 480px, only applies the rule when it is mobile.

ORIGINAL LINK: link

In my case, I've made some changes, and it's working when you advance TABS, but when you click to go back, it does not work. If anyone can help me.

<ul id="mytabs" class="nav nav-tabs nav-tabs-responsive" role="tablist">
    <li class="nav-item active">
        <a class="nav-link active" data-toggle="tab" href="#menu_1">
            <span class="text">Menu 1</span>
        </a>
    </li>
    <li class="nav-item next">
        <a class="nav-link" data-toggle="tab" href="#menu_2">
            <span class="text">Menu 2</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu_3">
            <span class="text">Menu 3</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu_4">
            <span class="text">Menu 4</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu_5">
            <span class="text">Menu 5</span>
        </a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="menu_1">
        MENU 1
    </div>
    <div class="tab-pane next" id="menu_2">
        MENU 2
    </div>
    <div class="tab-pane" id="menu_3">
        MENU 3
    </div>
    <div class="tab-pane" id="menu_4">
        MENU 4
    </div>
    <div class="tab-pane" id="menu_5">
        MENU 5
    </div>
</div>

CSS:

@media screen and (max-width: 479px) {

    .nav-tabs-responsive > li {
        display: none;
        width: 23%;
    }

  .nav-tabs-responsive > li > a {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    width: 100%;
    width: 100%;
    text-align: center;
    vertical-align: top;
  }
  .nav-tabs-responsive > li.active {
    width: 54%;
  }
  .nav-tabs-responsive > li.active:first-child {
    margin-left: 23%;
  }
  .nav-tabs-responsive > li.active, .nav-tabs-responsive > li.prev, .nav-tabs-responsive > li.next {
    display: block;
  }
  .nav-tabs-responsive > li.prev, .nav-tabs-responsive > li.next {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  .nav-tabs-responsive > li.next > a, .nav-tabs-responsive > li.prev > a {
    -webkit-transition: none;
    transition: none;
  }
  .nav-tabs-responsive > li.next > a .text, .nav-tabs-responsive > li.prev > a .text {
    display: none;
  }
  .nav-tabs-responsive > li.next > a:after, .nav-tabs-responsive > li.next > a:after, .nav-tabs-responsive > li.prev > a:after, .nav-tabs-responsive > li.prev > a:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .nav-tabs-responsive > li.prev > a:after {
    content: "\f053";
  }
  .nav-tabs-responsive > li.next > a:after {
    content: "\f054";
  }
}

And the JS:

$(document).on('show.bs.tab', ' [data-toggle="tab"]', function(e) {


                    var $target = $(e.target);
                    var $tabs = $target.closest('.nav-tabs-responsive');

                    var $current = $target.closest('li');
                    var $next = $current.next();
                    var $prev = $current.prev();

                    $tabs.find('>li').removeClass('next prev');
                    $tabs.find('>li>a').removeClass('active');

                    $current.addClass('active');

                    $prev.addClass('prev');
                    $next.addClass('next');
          $('.prev a').removeClass('active');
                    $('.next a').removeClass('active');

});

LINK CODEPEN: link