How do I get tablists to be created when mobile?

Question

I wrote the HTML and CSS codes below does not have a problem, but I am using Flexbox system and I want my list in this title to be hidden and turn into a tablist on mobile screens, just like the following example; https://hizliresim.com/SSzKQZ how can i get it? (Without Boostrap) thanks for your help.

*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

h1{
  border-bottom: 2px solid red;
  padding-bottom: 1rem;
}

li{
  border-bottom: 1px solid black;
  list-style: none;
  font-size: 14px;
}

#wrap{
  background: black;
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}

.container{
  max-width: 1100px;
  margin: 0 auto;
  background-color: white;
  display: flex;
}

.main{
  width: 260px;
  height: 260px;
  margin-right: 1rem;
}

.main-1{
  margin-left: 1rem;
}

.tel{
  display: flex;
  flex-direction: column;
  width: 8rem;
  height: 3rem;
  justify-content: center;
  align-items: center;
  border: 2px solid red;
  margin-top: 1rem;
}

.pel{
  display: flex;
  flex-direction: column;
}

    <section id="wrap">
  <div class="container">
    <div class="main main-1">
      <h1>Hasta Rehberi</h1>
<ul>
  <li>Ziyaretçi Politikası</li>
  <li>Refakatçi Politikası</li>
  <li>Güvenlik Bilgisi ve Politikası</li>
  <li>Şikayet Politikası</li>
  <li>İleri Teknolojiler</li>
  <li>Hasta Hakları Birimi</li>
  <li>Memnuniyet Sağlama Süreci</li>
  <li>Hasta Odaları</li>
  <li>Ameliyathaneler</li>
</ul>
    </div>
    <div class="main main-2">
      <h1>Hasta Rehberi</h1>
<ul>
  <li>Ziyaretçi Politikası</li>
  <li>Refakatçi Politikası</li>
  <li>Güvenlik Bilgisi ve Politikası</li>
  <li>Şikayet Politikası</li>
  <li>İleri Teknolojiler</li>
  <li>Hasta Hakları Birimi</li>
  <li>Memnuniyet Sağlama Süreci</li>
  <li>Hasta Odaları</li>
  <li>Ameliyathaneler</li>
  <li>Memnuniyet Sağlama Süreci</li>
</ul>
    </div>
    <div class="main main-3">
      <h1>Hasta Rehberi</h1>
<ul>
  <li>Ziyaretçi Politikası</li>
  <li>Refakatçi Politikası</li>
  <li>Güvenlik Bilgisi ve Politikası</li>
  <li>Şikayet Politikası</li>
</ul>
  </div>

Answer 1

Here is a javascript solution.

I added the @media (max-width: 550px) in your css. When accessing the array, I used the forEach() method:

Array.from(tab).forEach(function(tabArray, i) {...});

The list display type is toggle - the toggle() method.

Was it necessary?

function f_width() {  
    let tab = document.querySelectorAll('.main h1');
    let menu = document.querySelectorAll('.main ul');    

    Array.from(tab).forEach(function(tabArray, i) {
      tabArray.addEventListener('click', function() {
      
        if (window.innerWidth <= 550) {
          menu[i].classList.toggle('active_ul');
        } else {} 
        
    });
  });  
}

window.addEventListener("load", f_width);
/*window.addEventListener("resize", f_width);*/

*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

h1{
  border-bottom: 2px solid red;
  padding-bottom: 1rem;
}

li{
  border-bottom: 1px solid black;
  list-style: none;
  font-size: 14px;
}

#wrap{
  background: black;
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}

.container{
  max-width: 1100px;
  margin: 0 auto;
  background-color: white;
  display: flex;
}

.main{
  width: 260px;
  height: 260px;
  margin-right: 1rem;
}

.main-1{
  margin-left: 1rem;
}

.tel{
  display: flex;
  flex-direction: column;
  width: 8rem;
  height: 3rem;
  justify-content: center;
  align-items: center;
  border: 2px solid red;
  margin-top: 1rem;
}

.pel{
  display: flex;
  flex-direction: column;
}

.active_ul {
  display: block;
}

@media (max-width: 550px) {
  .container {
    flex-direction: column;
  }
  
  .main {
    height: unset;
  }
  
  .main h1 {
    cursor: pointer;
  }
  
  .main-2,
  .main-3 {
    margin-left: 1rem;
    margin-top: 1rem;
  }
  
  .main-3 {
    margin-bottom: 1rem;
  }

  ul {
    display: none;
  }
}

<section id="wrap">
  <div class="container">
    <div class="main main-1">
      <h1>Hasta Rehberi</h1>
<ul>
  <li>Ziyaretçi Politikası</li>
  <li>Refakatçi Politikası</li>
  <li>Güvenlik Bilgisi ve Politikası</li>
  <li>Şikayet Politikası</li>
  <li>İleri Teknolojiler</li>
  <li>Hasta Hakları Birimi</li>
  <li>Memnuniyet Sağlama Süreci</li>
  <li>Hasta Odaları</li>
  <li>Ameliyathaneler</li>
</ul>
    </div>
    <div class="main main-2">
      <h1>Hasta Rehberi</h1>
<ul>
  <li>Ziyaretçi Politikası</li>
  <li>Refakatçi Politikası</li>
  <li>Güvenlik Bilgisi ve Politikası</li>
  <li>Şikayet Politikası</li>
  <li>İleri Teknolojiler</li>
  <li>Hasta Hakları Birimi</li>
  <li>Memnuniyet Sağlama Süreci</li>
  <li>Hasta Odaları</li>
  <li>Ameliyathaneler</li>
  <li>Memnuniyet Sağlama Süreci</li>
</ul>
    </div>
    <div class="main main-3">
      <h1>Hasta Rehberi</h1>
<ul>
  <li>Ziyaretçi Politikası</li>
  <li>Refakatçi Politikası</li>
  <li>Güvenlik Bilgisi ve Politikası</li>
  <li>Şikayet Politikası</li>
</ul>
  </div>