With CSS

by mahassan

HTML

<link rel="stylesheet" href="https://d4brzylba2jia.cloudfront.net/1.0.0/stylesheets/base.css">
<ul class="list-columns list-columns--max-cols-3 bullets">
    <li class="list-columns__item">Applying for courses</li>
    <li class="list-columns__item">Agriculture, horticulture and veterinary studies</li>
    <li class="list-columns__item">Area studies, languages and literature</li>
    <li class="list-columns__item">Arts and crafts</li>
    <li class="list-columns__item">Business and management</li>
    <li class="list-columns__item">Construction</li>
    <li class="list-columns__item">Education</li>
    <li class="list-columns__item">Engineering and production</li>
    <li class="list-columns__item">Environment</li>
    <li class="list-columns__item">Family and personal care services</li>
    <li class="list-columns__item">Food, leisure and hospitality</li>
    <li class="list-columns__item">Humanities</li>
    <li class="list-columns__item">Information technology</li>
    <li class="list-columns__item">Librarianship</li>
    <li class="list-columns__item">Media studies</li>
    <li class="list-columns__item">Medicine and health studies</li>
    <li class="list-columns__item">Science</li>
    <li class="list-columns__item">Social sciences</li>
    <li class="list-columns__item">Teaching</li>
    <li class="list-columns__item">Transport</li>
</ul>

SCSS

.list-columns{
display: flex;
  flex-direction:column;
  height: 90vh;
  flex-wrap: wrap;
  @media only screen and (max-width: 300px){
    max-width:300px;
    flex-wrap: auto;
    height: auto;
    .list-columns__item{
      width: 100%;
    }
  }
}

JavaScript

//I m using SCSS in the fiddle for 2 reason
//1st - DRY - SCSS is amazing with do not repeat yourself
// instead of writting each class and then it child etc
// I can nest and get the output I want
//2nd - Media queries are very easy in SCSS, same rules apply as stated in point 1.