スマホ表示の際要素の場所を変更したい

HTML

<div class="hoge-pc-box">
<!--PC時のリスト表示場所 -->
<ul class="hoge">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
</div>

<div class="hoge-sp-box">
<!-- スマホ時のリスト表示場所 -->
</div>

jQuey

$(function(){
  $('.hoge').each(function(i){ //動かしたい要素のclass名
    $('.hoge-sp-box').append($('.hoge')); //動かしたい場所のclass名と動かしたい要素のclass名
   });
 });

結果

<div class="hoge-pc-box">
<!--PC時のリスト表示場所 -->
</div>

<div class="hoge-sp-box">
<!-- スマホ時のリスト表示場所 -->
<ul class="hoge">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
</div>

BACK TO LIST