Создание списка в адаптивном списке из трех столбцов

Привет всем, у меня длинный список, и я хочу, чтобы он был адаптивным загрузочным списком из трех столбцов в режиме рабочего стола, но при переносе его в окно среднего размера (возможно, планшет) он становится списком из двух столбцов, а при переносе его в небольшой Размер окна (возможно, мобильного) становится списком из одного столбца.



Как мне это сделать через бутстрап? Текущий код, который у меня есть сейчас:

 <h3> <b>Material Guides:</b></h3>


<ul>


<li><a href="victims/pa103_v_ahern_john.php">John Michael Gerard Ahern</a>


<li><a href="victims/pa103_v_akerstrom_john.php">John David Akerstrom</a>


<li><a href="victims/pa103_v_atkinson_william_judith.php">William Garretson Atkinson</a>


<li><a href="victims/pa103_v_bainbridge_harry.php">Harry Michael Bainbridge</a>


<li><a href="victims/pa103_v_bennett_lawrence.php">Lawrence Ray Bennett</a>


<li><a href="victims/pa103_v_berkley_alistair.php">Alistair David Berkley</a>


<li><a href="victims/pa103_v_berrell_steven.php">Steven Russell Berrell * </a>


<li><a href="victims/pa103_v_bhatia_surinder.php">Surinder Mohan Bhatia</a>


<li><a href="victims/pa103_v_bouckley_glenn_paula.php">Glenn John</a>


<li><a href="victims/pa103_v_bright_nicholas.php">Nicholas Bright</a>


<li><a href="victims/pa103_v_buser_michael_warren.php">Warren Maxr</a>


<li><a href="victims/pa103_v_butler_steven.php">Steven Lee Butler</a>


<li><a href="victims/pa103_v_cadman_william.php">William Martin Cadman</a>


<li><a href="victims/pa103_v_caffarone_hernan_fabiana.php">uto de Caffarone</a>


<li><a href="victims/pa103_v_carlsson_bernt.php">Bernt Wilmar Carlsson</a>


<li><a href="victims/pa103_v_cawley_richard.php">Richard Anthony Cawley</a>


<li><a href="victims/pa103_v_corner_tracey.php">Tracey Jane Corner</a>


<li><a href="victims/pa103_v_coyle_patricia.php">Patricia Mary Coyle</a>


<li><a href="victims/pa103_v_cummock_john.php">John Binning Cummock</a>


<li><a href="victims/pa103_v_di_mauro_joyce.php">Joyce Christine Di Mauro</a>


<li><a href="victims/pa103_v_dix_peter.php">Peter Thomas Stanley Dix</a>


<li><a href="victims/pa103_v_dornstein_david.php">David Scott Dornstein</a>


<li><a href="victims/pa103_v_flannigan_family.php">Kathleen Mary</a>


<li><a href="victims/pa103_v_flynn_john_patrick.php">John Patrick Flynn * </a>


<li><a href="victims/pa103_v_gabor_ibolya.php">Ibolya Gabor</a>


<li><a href="victims/pa103_v_gannon_matthew.php">Matthew Kevin Gannon</a>


<li><a href="victims/pa103_v_gibson_kenneth.php">Kenneth James Gibson</a>


<li><a href="victims/pa103_v_halsch_lorraine.php">Lorraine Buser Halsch</a>


<li><a href="victims/pa103_v_hartunian_lynne.php">Lynne Carol Hartunian</a>


<li><a href="victims/pa103_v_herbert_pamela.php">Pamela Elaine Herbert * </a>


<li><a href="victims/pa103_v_hollister_katharine.php">Katharine Augusta Hollister</a>


<li><a href="victims/pa103_v_hudson_josephine.php">Josephine Lisa Hudson</a>


<li><a href="victims/pa103_v_ivell_elizabeth.php">Elizabeth Sophie Ivell</a>


<li><a href="victims/pa103_v_jaafar_khaled.php">Khaled Nazir Jaafar</a>


<li><a href="victims/pa103_v_jermyn_kathleen.php">Kathleen Mary Jermyn</a>


<li><a href="victims/pa103_v_johnson_mary.php">Mary Lincoln Johnson</a>


<li><a href="victims/pa103_v_ludlow_lloyd.php">Lloyd David Ludlow</a>


<li><a href="victims/pa103_v_macalolooy_lilibeth.php">Lilibeth Tobila MacAlolooy</a>


<li><a href="victims/pa103_v_macquarrie_james.php">James Bruce MacQuarrie</a>


<li><a href="victims/pa103_v_marek_elizabeth.php">Elizabeth Lillian Marek</a>


<li><a href="victims/pa103_v_mccollum_robert.php">Robert Eugene McCollum</a>


<li><a href="victims/pa103_v_mckee_charles.php">Charles Dennis McKee</a>


<li><a href="victims/pa103_v_mclaughlin_bernard.php">Bernard Joseph McLaughlin</a>


<li><a href="victims/pa103_v_miller_joseph.php">Joseph Kenneth Miller</a>


<li><a href="victims/pa103_v_mosey_helga.php">Helga Rachael Mosey</a>


<li><a href="victims/pa103_v_mulroy_family.php">John, Sean Keviy</a>


<li><a href="victims/pa103_v_noonan_karen.php">Karen Elizabeth Noonan</a>


<li><a href="victims/pa103_v_o'connor_daniel.php">Daniel Emmett O'Connor</a>


<li><a href="victims/pa103_v_owen_yvonne_bryony.php">Bryony</a>


<li><a href="victims/pa103_v_peirce_peter.php">Peter Raymond Peirce * </a>


<li><a href="victims/pa103_v_pescatore_michael.php">Michael C. Pescatore</a>


<li><a href="victims/pa103_v_pitt_james.php">James Andrew Campbell Pitt</a>


<li><a href="victims/pa103_v_posen_pamela.php">Pamela Lynn Posen</a>


<li><a href="victims/pa103_v_rubin_arnaud.php">Arnaud David Rubin</a>


<li><a href="victims/pa103_v_saraceni_elyse.php">Elyse Jeanne Saraceni</a>


<li><a href="victims/pa103_v_saunders_scott.php">Scott Christopher Saunders</a>


<li><a href="victims/pa103_v_schauble_johannes.php">Johannes Otto Schauble</a>


<li><a href="victims/pa103_v_shapiro_amy.php">Amy Elizabeth Shapiro * </a>


<li><a href="victims/pa103_v_shastri_mridula.php">Mridula Shastri</a>


<li><a href="victims/pa103_v_sigal_irving.php">Irving Stanley Sigal</a>


<li><a href="victims/pa103_v_skabo_irja.php">Irja S. Skabo</a>


<li><a href="victims/pa103_v_smith_cynthia.php">Cynthia Joan Smith * </a>


<li><a href="victims/pa103_v_smith_ingrid.php">Ingrid Anita Smith</a>


<li><a href="victims/pa103_v_smith_james.php">James Alvin Smith</a>


<li><a href="victims/pa103_v_stow_james.php">James Ralph Stow</a>


<li><a href="victims/pa103_v_swire_flora.php">Flora Macdonald Margaret Swire</a>


<li><a href="victims/pa103_v_teran_andrew.php">Andrew Alexander Teran</a>


<li><a href="victims/pa103_v_van_tienhoven_tomas.php">Tomas Floro van Tienhoven</a>


<li><a href="victims/pa103_v_vejdany_asaad.php">Asaad Eidi Vejdany</a>


<li><a href="victims/pa103_v_velimirovich_milutin.php">Milutin Velimirovich</a>


<li><a href="victims/pa103_v_wagner_raymond.php">Raymond Ronald Wagner</a>


<li><a href="victims/pa103_v_weedon_kesha.php">Kesha Weedon * </a>


<li><a href="victims/pa103_v_williams_george.php">George Watterson Williams</a>


<li><a href="victims/pa103_v_zwynenburg_mark.php">Mark James Zwynenburg</a>


</ul>

Код (разметка):

Где находятся закрывающие скобки для каждого элемента списка (

• )? Это разрешено в html5, но это не очень хорошая идея; легко сломать.
  Вот пример использования столбцов. Есть и другие способы сделать это, но этот простой. Обратите внимание, что точки останова находятся в em-мерах.
  Это позволяет им самостоятельно подстраиваться под предпочтительные размеры шрифта пользователей. Сужая область просмотра до тех пор, пока что-нибудь не сломается, вам не нужно отслеживать размеры области просмотра различных устройств. Идентификатор #victim-list находится в элементе UL.
  CSS
  

   
  
  
  body {
  
  
  background-color: white;
  
  
  color: black;
  
  
  font: 100%/1.5 sans-serif;
  
  
  margin: 0;
  
  
  padding: 1em;
  
  
  }
  
  
  p {
  
  
  font-size: 1em;
  
  
  }
  
  
  h1 {
  
  
  text-align: center;
  
  
  font-family: serif;
  
  
  }
  
  
  #victim-list {
  
  
  columns: 3;
  
  
  column-gap: 1.5em;
  
  
  }
  
  
  @media screen and (max-width: 56em) {
  
  
  #victim-list {
  
  
  columns: 2;
  
  
  }
  
  
  }
  
  
  @media screen and (max-width: 38em) {
  
  
  #victim-list {
  
  
  columns: 1;
  
  
  }
  
  
  }

  
  Код (разметка): gary
  

@kk5st дал вам хорошее решение: просто используйте столбцы CSS, а затем отрегулируйте количество столбцов в зависимости от ширины в EM для обеспечения доступности. Он также прав в правильном закрытии , и помещать внутри

- это семантическая ерунда, поскольку «Руководства по материалам» не являются ни собственным именем, ни юридическим лицом, то есть тем, что следует использовать. для. Ака будет выделен жирным шрифтом в профессионально написанном документе по семантическим причинам, если не будет применяться «больше акцента» (что является работой ). Если вы хотите, чтобы h3 был выделен жирным шрифтом, сделайте это в своей таблице стилей (хотя это ДОЛЖНО быть состоянием H3 по умолчанию).