I have a container with multiple divs and am utilizing the flexbox model. My goal is to achieve a specific layout using CSS without altering the order of the div tags.
https://i.sstatic.net/jdAK6.png
The desired outcome is to have the div with the value "8" appear first in the second row.
For reference, I have included the codepen link: codepen.
.container {
position: relative;
display: flex;
flex-flow: row wrap;
// align-items:flex-start;
align-content: space-around;
justify-content: flex-start;
}
.item {
background-color: tomato;
box-sizing: border-box;
padding: 20px;
outline: 2px solid blue;
flex-basis: 20%;
}
.item-inside {
display: none;
background-color: #ABABAB;
box-sizing: border-box;
padding: 20px;
outline: 1px solid red;
flex-basis: 80%;
}
.show {
display: block;
}
.hide {
display: none;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">8</div>
<div class="item">7</div>
<div class="item">6</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">8</div>
<div class="item">12</div>
</div>