Как перекинуть 1 карточку из текущего ряда в предыдущий?

Question

Evtera @Evtera

JavaScript

Как перекинуть 1 карточку из текущего ряда в предыдущий?

Здравствуйте. Есть три ряда с тремя карточками внутри в каждом. Как сделать так, чтобы при определенном разрешении экрана в каждом ряду было по 4 карточки, а в последнем осталась одна?

<!-- 1 ROW -->
      <div class="row cards__row">
        <!-- 1 ROW 1 ITEM -->
        <a href="#" class="cards__item tag tag_new">
          <img class="cards__image" src="./img/cards/1.jpg" alt="Ilon Mask" />
          <p class="cards__text">Кто такой Илон Маск?</p>
        </a>
    
        <!-- 1 ROW 2 ITEM -->
        <a href="#" class="cards__item">
          <img class="cards__image" src="./img/cards/2.jpg" alt="Al Capone" />
          <p class="cards__text">История Аль Капоне</p>
        </a>
    
        <!-- 1 ROW 3 ITEM -->
        <a href="#" class="cards__item">
          <img class="cards__image" src="./img/cards/3.jpg" alt="Steve Jobs" />
          <p class="cards__text">За что все любят Стива Джобса?</p>
        </a>
      </div>
    
        <!-- 2 ROW -->
      <div class="row cards__row">
        <!-- 2 ROW 1 ITEM -->
        <a href="#" class="cards__item >
          <img class="cards__image" src="./img/cards/4.jpg" alt="Walt Disney" />
          <p class="cards__text">Империя Уолта Диснея</p>
        </a>
    
        <!-- 2 ROW 2 ITEM -->
        <a href="#" class="cards__item tag tag_popular">
          <img class="cards__image" src="./img/cards/5.jpg" alt="Miami Founders" />
          <p class="cards__text">Основатели Майами</p>
        </a>
    
        <!-- 2 ROW 3 ITEM -->
        <a href="#" class="cards__item">
          <img class="cards__image" src="./img/cards/6.jpg" alt="Mark Zuckerberg" />
          <p class="cards__text">Миллиардер Марк Цукерберг</p>
        </a>
      </div>
    
    
        <!-- 3 ROW -->
      <div class="row cards__row">
        <!-- 3 ROW 1 ITEM -->
        <a href="#" class="cards__item >
          <img class="cards__image" src="./img/cards/7.jpg" alt="David Rockefeller" />
          <p class="cards__text">Как разбогател Рокфеллер?</p>
        </a>
    
        <!-- 3 ROW 2 ITEM -->
        <a href="#" class="cards__item ">
          <img class="cards__image" src="./img/cards/8.jpg" alt="20th century writers" />
          <p class="cards__text">Американские писатели 20 века</p>
        </a>
    
        <!-- 3 ROW 3 ITEM -->
        <a href="#" class="cards__item tag tag_usefull">
          <img class="cards__image" src="./img/cards/9.jpg" alt="Ralph Lauren" />
          <p class="cards__text">Модный Ральф Лорен</p>
        </a>
      </div>