Как исправить баг при смене формата расположения итемов (ряд / строка)?

$(document).ready(function() {

function changeFormat(btn, btn_active, btn_check, row, wrap, inner) {
  $(btn).on('click', function () {
    let elems = $(btn);
   elems.each(function(index, item) {
    $(item).removeClass(btn_active); 
    });
   $(this).addClass(btn_active);
      if($(row).hasClass(btn_check) ) {
        $(wrap).addClass(inner);
      } else {
       $(wrap).removeClass(inner);
      }
  })
  }

changeFormat('.shop__view', 'shop__view--active', 'shop__view--active', '.shop__view--row', '.shop', 'shop--inner');

 var wpapper = $('.shop__item');
  wpapper.each(function(index, element) {
    let __this = $(this);
    let gallery = __this.find('.shop__slider');
    let arrowsShop = __this.find('.shop__wrap-btn');
    let dots = __this.find('.shop__dots');
    gallery.slick({
      infinite: true,
      // speed: 600,
      slidesToShow: 1,
      // autoplay: true,
      //autoplaySpeed:5000,
      draggable: false,
      fade: false,
      arrows: true,
      appendArrows: arrowsShop,
      prevArrow: '<button class="shop__btn shop__btn--dir_left"></div>',
      nextArrow: '<button class="shop__btn shop__btn--dir_right"></button>',
      dots: true,
      appendDots: dots,
      customPaging: function(slider, i) {
        return '0' + (i + 1);
      },
      dotsClass: 'shop__dots-list',
    });
  });
  });

.shop {
    background-color: #fff;
    padding-top: 80px;
    padding-bottom: 34px;
}

.shop__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shop__elem {
    font-size: 12px;
    line-height: 1.2;
    color: #6B6C70;
    margin-bottom: 32px;
}

.shop .select__wrap {
    max-width: 290px;
    margin-bottom: 32px;
}

.shop .select__placeholder {
    border: 1px solid #ECEDF3;
    border-radius: 4px;
}

.shop .select__list {
    margin-top: 10px;
    border: 1px solid #ECEDF3;
    border-radius: 4px;
}

.shop__wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px;
}

.shop__slider {
    position: relative;
}

.shop__item {
    position: relative;
    width: calc(100% / 3 - 40px);
    margin: 0 20px;
    margin-bottom: 32px;
}

.shop__item:hover .shop__size,
.shop__item:hover .shop__btn {
    opacity: 1;
    visibility: visible;
}

.shop__item .slick-track {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop__pic {
    display: block;
}

.shop__pic img {
    display: block;
    margin: 0 auto;
}

.shop__holder {
    display: flex;
}

.shop__box--aside {
    width: 290px;
    padding-top: 2px;
}

.shop__box--content {
    width: calc(100% - 290px);
    padding-right: 40px;
}

.shop__subtitle {
    font-size: 14px;
    line-height: 1.2;
    color: #3D3F42;
    text-transform: uppercase;
    padding-bottom: 24px;
    font-weight: 600;
}

.shop__list {
    display: flex;
    flex-direction: column;
    padding-bottom: 48px;
}

.shop__list--size .shop__col {
    text-transform: uppercase;
}

.shop__col {
    cursor: pointer;
    display: inline-block;
    width: max-content;
    font-size: 14px;
    line-height: 1.2;
    color: #9F9F9F;
    margin-bottom: 16px;
}

.shop__row {
    position: relative;
    margin-bottom: 16px;
    outline: 2px solid red;
}

.shop__add {
    cursor: pointer;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 18px;
    height: 18px;
    border: none;
    outline: none;
    padding: 0px;
    background-color: transparent;
}

.shop__add--active .shop__icon {
    fill: #3D3F42;
}

.shop__icon {
    width: 100%;
    height: 100%;
    display: block;
    fill: #fff;
    stroke-width: 30px;
    stroke: #3D3F42;
}

.shop__size {
    position: absolute;
    z-index: 2;
    left: 0px;
    bottom: 0px;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    display: flex;
    justify-content: center;
    background-color: rgba(249, 249, 249, 0.8);
    padding: 0 12px;
    padding-top: 23px;
    margin: 0 -12px;
    transition: 0.5s opacity, 0.5s visibility;
}

.shop__user {
    user-select: none;
    cursor: default;
    font-size: 12px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #9F9F9F;
    margin: 0 12px;
    margin-bottom: 23px;
}

.shop__user--active {
    color: #212223;
}

.shop__sale {
    cursor: default;
    user-select: none;
    position: absolute;
    top: 0px;
    right: 0px;
    max-width: 43px;
    width: 100%;
    font-size: 12px;
    line-height: 1.2;
    color: #fff;
    background-color: #212223;
    text-transform: uppercase;
    text-align: center;
    padding: 4px 0;
}

.shop__title {
    font-size: 14px;
    line-height: 1.4;
    color: #3D3F42;
    text-align: center;
    margin-bottom: 8px;
}

.shop__block {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop__price {
    font-size: 12px;
    line-height: 1.2;
    color: #9F9F9F;
    text-transform: uppercase;
    text-align: center;
}

.shop__price--old {
    text-decoration: line-through;
    padding-right: 8px;
}

.shop__inner {
    display: flex;
    align-items: center;
}

.shop__btn {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: block;
    width: 44px;
    height: 44px;
    background-color: transparent;
    color: #ffffff;
    border: none;
    outline: none;
    transition: 0.5s opacity, 0.5s visibility;
}

.shop__btn--dir_left:after,
.shop__btn--dir_right:after {
    position: absolute;
    content: ' ';
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 3px);
    border-left: 2px solid #6B6C70;
    border-top: 2px solid #6B6C70;
    transform: rotate(-45deg);
}

.shop__btn--dir_right {
    right: 0px;
    transform: translateY(-50%) scaleX(-1);
}

.shop__dots-list {
    position: absolute;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    display: flex;
    margin: 0 -4px;
}

.shop__dots-list li {
    cursor: pointer;
    font-size: 0px;
    width: 5px;
    height: 5px;
    background-color: #E8E8E8;
    border-radius: 13px;
    margin: 0 4px;
}

.shop__dots-list li.slick-active {
    background-color: #9F9F9F;
}

.shop__control {
    display: none;
}

.shop__rebuild {
    display: block;
    width: 100%;
    height: 100%;
}

.shop__view {
    cursor: pointer;
    width: 16px;
    height: 16px;
    border: none;
    outline: none;
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
    padding: 0px;
    background-color: #fff;
}

.shop__view--row {
    margin-right: 24px;
}

.shop__view--row .shop__rebuild {
    fill: transparent;
    stroke: #6B6C70;
}

.shop__view--row.shop__view--active .shop__rebuild {
    stroke: red;
}

.shop__view--col .shop__rebuild {
    fill: #6B6C70;
    stroke: transparent;
}

.shop__view--col.shop__view--active .shop__rebuild {
    fill: red;
}

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

.shop__item {
    width: calc(100% / 2 - 40px);
}

}

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

.shop__box--content {
    padding-right: 30px;
}

}

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

.shop {
    padding-top: 12px;
    padding-bottom: 14px;
}

.shop__elem {
    display: none;
}

.shop .select__wrap {
    max-width: 172px;
    margin-bottom: 28px;
}

.shop .select__wrap:after {
    display: none;
}

.shop .select__placeholder {
    background-image: url(../img/icons/filter.svg);
    background-repeat: no-repeat;
    background-position: left 20px center;
    background-size: 16px 14px;
    font-size: 12px;
    color: #3D3F42;
    text-transform: uppercase;
    border-color: #3D3F42;
    padding-left: 48px;
    padding-right: 15px;
}

.shop .select__item {
    font-size: 12px;
    color: #3D3F42;
}

.shop .select__list {
    border-color: #3D3F42;
}

.shop__wrap {
    margin: 0px;
}

.shop--inner .shop__wrap {
    margin: 0px;
}

.shop--inner .shop__item {
    width: 100%;
    margin: 0px;
}

.shop__box--aside {
    display: none;
}

.shop__box--content {
    width: 100%;
    padding-right: 0px;
}

.shop__row {
    margin-bottom: 8px;
}

.shop__size {
    display: none;
}

.shop__title {
    margin-bottom: 5px;
}

.shop__control {
    display: flex;
    margin-bottom: 28px;
}

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>

<svg class="svg-about">
        <g id="favorites">
           <path d="M285.257,35.528c58.743,0.286,106.294,47.836,106.58,106.58c0,107.624-195.918,214.204-195.918,214.204S0,248.165,0,142.108c0-58.862,47.717-106.58,106.58-106.58l0,0c36.032-0.281,69.718,17.842,89.339,48.065C215.674,53.517,249.273,35.441,285.257,35.528z" />
        </g>
        <g id="btn--col">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M1 16C0.447715 16 0 15.5523 0 15V1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1V15C16 15.5523 15.5523 16 15 16H1ZM1.5 1.5V7.5H7.25V1.5H1.5ZM8.75 1.5V7.5H14.5V1.5H8.75ZM7.25 9H1.5V14.5H7.25V9ZM8.75 14.5V9H14.5V14.5H8.75Z"/>
        </g>
        <g id="btn--row">
            <mask id="path-1-inside-1" fill="white">
            <rect width="16" height="16" rx="1"/>
            </mask>
            <rect width="16" height="16" rx="1" stroke-width="3" mask="url(#path-1-inside-1)"/>
        </g>
    </svg>


    <section class="shop">
        <div class="container">
            <div class="shop__holder">
                <div class="shop__box shop__box--content">
                    <div class="shop__inner">
                        <p class="shop__elem">Показано <span>9</span> з <span>35</span> результатів</p>
                    
                        <div class="shop__control">
                            <button class="shop__view shop__view--row">
                                <svg viewBox="0 0 16 16" class="shop__rebuild">
                                    <use xlink:href="#btn--row"></use>
                                </svg>
                            </button>
                            <button class="shop__view shop__view--col shop__view--active">
                                <svg viewBox="0 0 16 16" class="shop__rebuild">
                                    <use xlink:href="#btn--col"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="shop__wrap">
                        <div class="shop__item">
                            <div class="shop__row">
                                <div class="shop__slider">
                                    <div class="shop__pic">
                                        <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                    <div class="shop__pic">
                                            <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                    <div class="shop__pic">
                                            <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                </div>
                                <div class="shop__wrap-btn"></div>
                                <div class="shop__dots"></div>
                                <button class="shop__add">
                                    <svg viewBox="-10 2 420 392" class="shop__icon">
                                        <use xlink:href="#favorites"></use>
                                    </svg>
                                </button>
                                <ul class="shop__size">
                                    <li class="shop__user">xs</li>
                                    <li class="shop__user shop__user--active">s</li>
                                    <li class="shop__user">m</li>
                                    <li class="shop__user shop__user--active">l</li>
                                </ul>
                            </div>
                            <p class="shop__title">Товар 1</p>
                            <div class="shop__block">
                                <p class="shop__price">5000</p>
                            </div>
                        </div>
                        <div class="shop__item">
                            <div class="shop__row">
                                <div class="shop__slider">
                                    <div class="shop__pic">
                                        <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                    <div class="shop__pic">
                                        <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                </div>
                                <div class="shop__wrap-btn"></div>
                                <div class="shop__dots"></div>
                                <button class="shop__add">
                                    <svg viewBox="-10 2 420 392" class="shop__icon">
                                        <use xlink:href="#favorites"></use>
                                    </svg>
                                </button>
                                <ul class="shop__size">
                                    <li class="shop__user">xs</li>
                                    <li class="shop__user shop__user--active">s</li>
                                    <li class="shop__user">m</li>
                                    <li class="shop__user shop__user--active">l</li>
                                </ul>
                            </div>
                            <p class="shop__title">Товар 2</p>
                            <div class="shop__block">
                                <p class="shop__price shop__price--old">5000 </p>
                                <p class="shop__price">3000 </p>
                            </div>
                            <p class="shop__sale">sale</p>
                        </div>
                        <div class="shop__item">
                            <div class="shop__row">
                                <div class="shop__slider">
                                    <div class="shop__pic">
                                            <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                    <div class="shop__pic">
                                            <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                </div>
                                <div class="shop__wrap-btn"></div>
                                <div class="shop__dots"></div>
                                <button class="shop__add shop__add--active">
                                    <svg viewBox="-10 2 420 392" class="shop__icon">
                                        <use xlink:href="#favorites"></use>
                                    </svg>
                                </button>
                                <ul class="shop__size">
                                    <li class="shop__user">xs</li>
                                    <li class="shop__user shop__user--active">s</li>
                                    <li class="shop__user">m</li>
                                    <li class="shop__user shop__user--active">l</li>
                                </ul>
                            </div>
                            <p class="shop__title">Товар 3</p>
                            <div class="shop__block">
                                <p class="shop__price">5000 </p>
                            </div>
                        </div>
                        <div class="shop__item">
                            <div class="shop__row">
                                <div class="shop__slider">
                                    <div class="shop__pic">
                                        <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                    <div class="shop__pic">
                                            <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" alt="">
                                    </div>
                                </div>
                                <div class="shop__wrap-btn"></div>
                                <div class="shop__dots"></div>
                                <button class="shop__add">
                                    <svg viewBox="-10 2 420 392" class="shop__icon">
                                        <use xlink:href="#favorites"></use>
                                    </svg>
                                </button>
                                <ul class="shop__size">
                                    <li class="shop__user">xs</li>
                                    <li class="shop__user shop__user--active">s</li>
                                    <li class="shop__user">m</li>
                                    <li class="shop__user shop__user--active">l</li>
                                </ul>
                            </div>
                            <p class="shop__title">Товар 4</p>
                            <div class="shop__block">
                                <p class="shop__price">5000 </p>
                            </div>
                        </div>
                    </div><!--end shop__wrap-->
                </div>
                <div class="shop__box shop__box--aside">
                    <h4 class="shop__subtitle">Категорії</h4>
                    <ul class="shop__list">
                        <li class="shop__col">сукні (<span class="shop__count">10</span>)</li>
                        <li class="shop__col">блузи (<span class="shop__count">17</span>)</li>
                        <li class="shop__col">жакети (<span class="shop__count">11</span>)</li>
                        <li class="shop__col">костюми (<span class="shop__count">10</span>)</li>
                        <li class="shop__col">спідниці (<span class="shop__count">8</span>)</li>
                        <li class="shop__col">штани (<span class="shop__count">10</span>)</li>
                        <li class="shop__col">sale (<span class="shop__count">15</span>)</li>
                    </ul>
                    <h4 class="shop__subtitle">Розмір</h4>
                    <ul class="shop__list shop__list--size">
                        <li class="shop__col">xs (<span class="shop__count">10</span>)</li>
                        <li class="shop__col">s (<span class="shop__count">17</span>)</li>
                        <li class="shop__col">m (<span class="shop__count">11</span>)</li>
                        <li class="shop__col">l (<span class="shop__count">10</span>)</li>
                    </ul>
                    <h4 class="shop__subtitle">Ціна</h4>
                    <div class="custom-range" data-id-custom-range="1" tabindex="0">
                        <div class="custom-range__line"></div>
                    </div>
                    <div class="shop__inner">
                        <div class="shop__submenu">
                            <div class="custom-range__inner">
                                <p class="custom-range__min" data-id-custom-range="1">1000</p>
                                    <div class="custom-range__desc">
                                        <span class="custom-range__min-value" data-id-custom-range="1" data-base-value="1000">1000</span>uah - 
                                       <span class="custom-range__max-value" data-id-custom-range="1"  data-base-value="10000">10000</span>uah
                                   </div>
                                <p class="custom-range__max" data-id-custom-range="1">10000</p>
                            </div>     
                        </div>
                        <button class="btn btn--show">Показати</button>
                    </div>
                </div>
            </div><!--end shop__holder-->
        </div>
    </section>
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>