Utilizing the Bulma CSS framework.
In my attempt to arrange some elements, I am puzzled as to why, in a desktop view, the items do not transition to the next row once they exceed the viewport.
Below is a snippet of code along with a link to a JS Bin example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.min.css">
<title>JS Bin</title>
</head>
<body>
<div class="columns">
<div class="column is-one-quarter">
Col 1
</div>
<div class="column is-one-quarter">
Col 2
</div>
<div class="column is-one-quarter">
Col 3
</div>
<div class="column is-one-quarter">
Col 4
</div>
<div class="column is-one-quarter">
Col 5
</div>
</div>
<div class="columns">
<div class="column is-4">
column is-4
</div>
<div class="column is-4">
column is-4
</div>
<div class="column is-4">
column is-4
</div>
<div class="column is-4">
column is-4
</div>
<div class="column is-4">
column is-4
</div>
</div>
</body>
</html>To better illustrate the issue, I have set up a simple JS Bin demo:
http://jsbin.com/juquzexezu/edit?html,output
If you widen the output window, you'll notice that Col-5 div on the first row and the two remaining div elements on the second row are not displayed.
The desired outcome is for those missing div elements to automatically move to the next row when the horizontal space is filled.