bootstrap tab as tab for mobile

I'm designing a bootstrap tab for mobile. But the problem is, while in a desktop browser, the tabs are ok, but when it changes to mobile screen size, the tabs come one under the other. It automatically adjusts due to the responsiveness. But I want it responsive yet to be in a tab form in the mobile as well.

The html is:

<section class="panel">
                <header class="panel-heading bg-light">
                  <ul class="nav nav-tabs nav-justified">
                    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                    <li><a href="#profile" data-toggle="tab">Profile</a></li>
                    <li><a href="#messages" data-toggle="tab">Messages</a></li>
                  </ul>
                </header>
                <div class="panel-body">
                  <div class="tab-content">
                    <div class="tab-pane active" id="home">home</div>
                    <div class="tab-pane" id="profile">profile</div>
                    <div class="tab-pane" id="messages">message</div>
                  </div>
                </div>
              </section>

Here is the fiddle at http://jsfiddle.net/LdWUV/

How can I achieve this?