Responsive show/hide links on Wordpress - wordpress

Question

I would like to have a list of show/hide links that show divs occupying the same space, and able to be responsive.
My list appear on left and show content on right.
The idea is that when I click on Link 1, then content #1 will show up, and when I click on Link 2, then content #1 will disappear and content #2 will take it's place.
When loading the page on small and mobile screen, I would like to get content #1 showing up under Link 1 when clicking on it, and content 1 pushs link 2 down. And so on, content #2 showing up under Link 2, and pushs link 3 down…
I am working on Wordpress and Bootstrap, using my own theme. I don't reject to use .php file to achieve that. So far, I have tried this in html, css and js. Since I got stuck trying to get this reponsive, I am open to get a diffent method if necessary. But I would like to be able to fill the content and links name from Wordpress.
Here is my initial code
$(function () {
$("a[id^='link']").click(function (e) {
e.preventDefault();
var index = this.id.replace("link", "");
$(".panel").hide();
$("#panel" + index).show();
});
});
.side-nav {
font-size: calc(18px + 3vw);
}
.panel {
font-size: calc(18px + 1vw);
display: none;
position:absolute;
top: 0px;
right: 0px;
width: 70%;
}
<div id="side-nav-container">
<div class="side-nav">
<a id="link1 " href="# ">Link 1</a>
<a id="link2 " href="# ">Link 2>/a>
</div>
<div id="side-nav-content">
<div id="panel1 " class="panel ">Content 1</div>
<div id="panel2 " class="panel ">Content 2</div>
</div>
</div>
new code
$('#myTabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
})
.tab-content {
font-size: calc(12px + .99vw);
}
.nav-tab-list {
font-size: calc(18px + 1vw);
}
<div class="container">
<div class="row">
<div class="nav-tab-list col-lg-6 col-md-5 col-xs-12">
<ul class="nav nav-stacked" role="tablist">
<li class="active" role="presentation"><a role="tab" href="#home" aria-controls="home" data-toggle="tab">Home</a></li>
<li role="presentation"><a role="tab" href="#profile" aria-controls="profile" data-toggle="tab">Profile</a></li>
<li role="presentation"><a role="tab" href="#messages" aria-controls="messages" data-toggle="tab">Messages</a></li>
<li role="presentation"><a role="tab" href="#settings" aria-controls="settings" data-toggle="tab">Settings</a></li>
</ul>
</div>
<div class="col-lg-6 col-md-5 col-xs-12">
<div class="tab-content">
<div id="home" class="tab-pane active" role="tabpanel">Bonjour</div>
<div id="profile" class="tab-pane" role="tabpanel">Hello</div>
<div id="messages" class="tab-pane" role="tabpanel">Au revoir</div>
<div id="settings" class="tab-pane" role="tabpanel">Goodbye</div>
</div>
</div>
</div>
</div>