I currently have the following HTML code snippet:
<!DOCTYPE html>
<html lang="en>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 px-1 bg-dark">
<div class="py-2 sticky-top flex-grow-1">
<div class="nav flex-sm-column">
<a href="" class="nav-link d-none d-sm-inline">Sidebar</a>
<a href="" class="nav-link">Link</a>
<a href="" class="nav-link">Link</a>
<a href="" class="nav-link">Link</a>
<a href="" class="nav-link">Link</a>
<a href="" class="nav-link">Link</a>
</div>
</div>
</div>
<div class="col" id="main">
<h1>Main Area</h1>
<p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote b...
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
https://www.w3schools.com/code/tryit.asp?filename=G6GLE5UA2TUM (You can press run to execute the code above)
I am looking to modify the behavior of this code snippet so that the left sidebar moves to the top of the screen when the width of the resolution goes below 1024px, rather than 580px. How can I achieve this using Bootstrap 4?