- Test Links. Utilizing Bootstrap classes, adjust the div element with the ID "links" to display differently based on screen resolutions. On extra small screens (<576px), each link and ad should occupy one whole row. It will have this appearance: https://i.sstatic.net/oA4eY.png
For small screens and larger (≥576px), both links should each take up half of the row while the ads remain hidden. The layout should resemble this: https://i.sstatic.net/0n0Zb.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tests</title>
<link
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
a,
div {
outline: 1px solid black;
}
</style>
</head>
<body>
<div id="links">
<a href="#">Aptitude tests</a>
<div>Ads!</div>
<a href="#">Programming tests</a>
<div>More ads!</div>
</div>
<article>Here you can find various tests...</article>
</body>
</html>