假設原本上方會有一排菜單長這樣
https://imgur.com/tUOegCe

當變成手機版時會變成漢堡排
而這些字都會收納到漢堡排中
我現在是用一個很詭異的方式
假設現在有Ａ區塊跟Ｂ區塊
電腦版時顯示Ａ區塊，隱藏Ｂ
手機版時顯示Ｂ區塊，隱藏Ａ
也就是說手機版的區塊中會有漢堡排跟手機版樣式的菜單
電腦版則就是像上方的圖一樣
就像這樣

<?=$DESKTOP;?>
    <a class="section-btn ease-in-out" href="#section-2">服務介紹</a>
    <a class="section-btn ease-in-out" href="#section-3">成功案例</a>
    <a class="section-btn ease-in-out" href="#section-4">聯絡我們</a>
<?=$END?>

<?=$MOBILE;?>
<i class="material-icons header-device-menu-btn">dehaze</i>
<div class="header-device-menu-layout display-none">
    <a class="section-btn ease-in-out" href="#section-2">服務介紹</a>
    <a class="section-btn ease-in-out" href="#section-3">成功案例</a>
    <a class="section-btn ease-in-out" href="#section-4">聯絡我們</a>
</div>
<?=$END?>

請問這種漢堡排情況，什麼是「常規」的做法？