탭 스왑 질문드려요

아래 코드를 사용하면

PC에서는 탭이 가로로 나열이 되는데

모바일에서는 세로로 나열이 되네요.

모바일에서도 가로로 하려면 어떻게 하면 될까요 ?

<!-- 랜덤 무한탭 메뉴 시작 -->

<div class="widget-box widget-img"> <!-- 위 아래 위젯 간격 1칸 주기위함 -->

<div id="tab" class="div-tab tabs swipe-tab">

<div class="main-tab bg-light">

  <ul class="nav nav-tabs nav-justified">

  <?php $tnum = rand(1, 3); //탭이 열개라면 1부터 10까지 랜덤 숫자 추출 ?>

            <li<?php if($tnum == "1") echo ' class="active"';?>>

   <a href="#main-tab-a1" data-toggle="tab">탭1</a></li>

   <li<?php if($tnum == "2") echo ' class="active"';?>>

            <a href="#main-tab-a2" data-toggle="tab">탭2</a></li>

   <li<?php if($tnum == "3") echo ' class="active"';?>>

            <a href="#main-tab-a3" data-toggle="tab">텝3</a></li>

        </ul>

        <div class="tab-content">

            <div class="tab-pane <?php if($tnum == "1") echo 'active';?>" id="main-tab-a1"style="border:1px solid #ddd; padding:11px;">

                <?php echo latest("게시판종류", "게시판명", 5, 25 ); ?> 

    <div class="clearfix"></div>

            </div>

            <div class="tab-pane <?php if($tnum == "2") echo 'active';?>" id="main-tab-a2"style="border:1px solid #ddd; padding:11px;">

                 <?php echo latest("게시판종류", "게시판명", 5, 25 ); ?> 

    <div class="clearfix"></div>

            </div>

   <div class="tab-pane <?php if($tnum == "3") echo 'active';?>" id="main-tab-a3" style="border:1px solid #ddd; padding:11px;">

               <?php echo latest("게시판종류", "게시판명", 5, 25 ); ?> 

    <div class="clearfix"></div>

            </div>           

         </div>

       </div></div>

  <!-- 랜덤 무한탭 메뉴 끝 -->