In the following example, how can I let the second row of children let float to the top?
Like this:
I tried using columns, but then only setting the order manually would work (1 to order: 1, 2 to order: 3, 3 to order 2).
I want it this way, because if a child becomes long, I don't want it to move the second row (or the next column child) to be moved down as well.
.container{
display: flex;
width: 90vw;
height: 1000px;
background-color: #bfdcf3;
flex-direction: row;
flex-wrap: wrap;
}
.child{
order: 1;
width: 50%;
}
.text{
background-color: #ffae6d;
margin: 10px;
padding: 3px;
}<html>
<div class="container">
<div class="child">
<div class="text">
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lacus vel convallis tempor. Nulla
efficitur dolor risus, sit amet rhoncus ex viverra et. Aliquam sed est sapien. Vestibulum consequat quam ac
bibendum mattis. Aenean sit amet malesuada ex.
</div>
</div>
<div class="child">
<div class="text">
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lacus vel convallis tempor. Nulla
efficitur dolor risus, sit amet rhoncus ex viverra et. Aliquam sed est sapien. Vestibulum consequat quam ac
bibendum mattis. Aenean sit amet malesuada ex. Cras pretium finibus arcu non consectetur. Etiam ante dolor,
hendrerit at feugiat ut, eleifend at mi. Pellentesque non lobortis leo. Pellentesque aliquet iaculis eros ac
viverra. Fusce ut sem euismod, consequat lacus et, egestas orci. Praesent malesuada odio ac diam sagittis
mattis. Duis ut neque eu odio laoreet consequat. Donec tristique nibh purus, vitae pellentesque dui vulputate
vel. In laoreet molestie.
</div>
</div>
<div class="child">
<div class="text">
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lacus vel convallis tempor. Nulla
efficitur dolor risus, sit amet rhoncus ex viverra et. Aliquam sed est sapien. Vestibulum consequat quam ac
bibendum mattis. Aenean sit amet malesuada ex. Cras pretium finibus arcu non consectetur. Etiam ante dolor,
hendrerit at feugiat ut, eleifend at mi. Pellentesque non lobortis leo. Pellentesque aliquet iaculis eros ac
viverra.
</div>
</div>
<div class="child">
<div class="text">
4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lacus vel convallis tempor. Nulla
efficitur dolor risus, sit amet rhoncus ex viverra et. Aliquam sed est sapien. Vestibulum consequat quam ac
bibendum mattis. Aenean sit amet malesuada ex. Cras pretium finibus arcu non consectetur. Etiam ante dolor,
hendrerit at feugiat ut, eleifend at mi. Pellentesque non lobortis leo. Pellentesque aliquet iaculis eros ac
viverra.
</div>
</div>
</div>
</html>
