This is my customized menu using Semantic UI, which is stackable for mobile devices. I am looking to make it collapsible on low resolutions such as mobile devices. Here is an example of what I'm aiming for: https://i.sstatic.net/6qHuc.png
Could anyone provide guidance on how to achieve this? Thank you
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="container" class="ui fluid container">
<div id="navbar" class="ui stackable yellow inverted menu">
<div class="item">
<img src="assets/images/logo.png">
</div>
<a class="item" href="">Page1</a>
<div class="ui pointing dropdown link item">
<span class="text yellow inverted">Page 2</span>
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
</div>
</div>
<a class="item" href="">Page 3</a>
<a class="item" href="">Page 4</a>
<a class="item" href="">Page 5</a>
</div>
</div>
<script src="semantic/dist/semantic.min.js"></script>
<script>
$('.dropdown').dropdown({
transition: 'drop',
on: 'hover'
});
</script>
</body>
</html>