html - 如何在移动时创建标签列表？

Question

我写了下面的HTML和CSS代码没有问题，但是我使用的是Flexbox系统，我希望这个标题中的列表被隐藏并变成移动屏幕上的标签列表，就像下面的例子一样； https://hizliresim.com/SSzKQZ我怎么才能得到它？ (无 Boostrap)
谢谢你的帮助。

*{
  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

这是一个javascript解决方案。
我添加了 @media (max-width: 550px)在你的 css 中。访问数组时，我使用了 forEach()方法:

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

列表显示类型是切换 - toggle()方法。
有必要吗？

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>