In the code snippet below, there are three divs that should respond to window resizing by adjusting their layout.
When the window becomes too small, the middle div should move down as illustrated in the accompanying image.
<!DOCTYPE html>
<html>
<head>
<style>
#mainCont
{
background-color: lightblue;
display: flex;
justify-content: space-between;
}#middleCont
{
background-color: lavender;
}#middleCont a
{
padding: 0 80px;
}
</style>
</head>
<body>
<div id="mainCont">
<div>Word</div>
<div id="middleCont">
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
<a href="#">link 4</a>
<a href="#">link 5</a>
</div>
<div>Word</div>
</div>
</body>
</html>
(https://i.sstatic.net/VN02X.jpg)
Many thanks for your assistance.
I am looking forward to achieving the desired layout shown in the image.