With JS

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>
</ul>

JavaScript

//take a reference for the UL
const ul = document.querySelector(".list-columns");
//select the style property of the UL
const styles = ul.style;
//Everytime when the window resize
window.addEventListener('resize', (event) => {
//check IF window size is max-width of 300px
 if (window.matchMedia("(max-width: 300px)").matches) { 
 //then apply the following css styles
  styles.maxWidth = "300px";
  styles.flexWrap = "auto";
  styles.height = "auto";
} else {
//ELSE meaning it is bigger display then apply following css styles
  styles.display = "flex";
  styles.flexDirection = "column";
  styles.height = " 90vh";
  styles.flexWrap = "wrap";
}
});