JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

   <div class="main-left">
     <h1>左カラム</h1>
     　 <ul>
       <li><a href="#">aa</a></li>
       <li><a href="#">bb</a></li>
     </ul>
   </div>


   <div id="clone-container" class="clone-container">
     <!-- クローンをここに動的に生成 -->
   </div>

   <main id="main-center" class="main-center">
     <h1>題名</h1>
     <section>
       <p>中央の要素</p>
     </section>
   </main>

   <div class="main-right">
     <div id="nav-right-1" class="nav-right nav-right-1">
       <h1> 右カラムの一つ目の要素</h1>
       <ul class="menu">
         <li><a href="#">aa</a></li>
         <li><a href="#">bb</a></li>
       </ul>
     </div>
     <aside class="nav-right nav-right-2">
       <h1 class="txtl">右カラムの２つ目の要素</h1>
       <p>ここに要素が入ります</p>
     </aside>
   </div>

 </div>

CSS

.container {
  display: flex;
  justify-content: space-between;
}

.main-left {
  width: 20%;
  background-color: pink;
}

.main-center {
  width: 40%;
  background-color: skyblue;
}

/* PCのとき、クローン非表示 */
.clone-container {
  display: none;
}

.main-right {
  width: 35%;
}

.nav-right-1,
.nav-right-2 {
  background-color: yellow;
}

@media screen and (max-width: 640px) and (min-width:320px) {

  /*　画面サイズが640pxから320pxまではここを読み込む　*/
  .container {
    flex-direction: column;
  }

  .main-left {
    display: none;
  }

  .main-center {
    order: 1;
    width: 100%;
  }
  
  .clone-container {
    display: block;
  }

  .main-right {
    order: 2;
    width: 100%;
  }
  
  /* SPのとき、クローンじゃない右カラム1つ目の要素を非表示 */
  .nav-right-1:not(.is-cloned) {
    display: none;
  }
}

JavaScript

// ページ読み完了時に、placeClone()関数を実行
window.addEventListener('load', placeClone);

/*
 * クローンを生成して、配置する関数
 */
function placeClone() {
  // 要素を取得
  const container = document.querySelector('#clone-container');
  const navRight1 = document.querySelector('#nav-right-1');
  
  const clone = navRight1.cloneNode(true); // #nav-right-1のクローンを作成  
  clone.id = 'nav-right-1-clone'; // id変更
  clone.classList.add('is-cloned'); // クラス追加
  container.append(clone); // クローンを#clone-containerの中に配置
}