How to reorder columns?

Question

I have a two-column layout with several elements inside:

.grid { column-count: 2; } .grid-item { break-inside: avoid; height: 50px; margin-bottom: 10px; background-color: green; text-align: center; line-height: 50px; color: white; } 

 <div class="grid"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> </div> 

https://codepen.io/Deka87/pen/RgdLeZ

Now I need the ability to reorder these elements inside the columns using CSS only (so they were in a different order at different screen resolutions), so I thought I could do it with

 .grid { display: flex; flex-direction: column; column-count: 2; } .grid-item:nth-child(1) { order: 5; } 

Obviously, this did not work and broke the two-column layout. Has anyone tried to solve this before? Any chance I can get this to work?

PS: Elements of the same line should not have the same height (in this case, I could use simple floats). Sorry for not specifying at the beginning.

Answer 1

Without a fixed height on the container, a column of flexible items will not know where to wrap them. There is nothing that could cause a break, so the elements will continue to expand on one column.

In addition, column-count and display: flex represent two different CSS technologies. column-count not a valid property in a flex container.

A CSS table layout might be useful for you:

resize screen to trigger media request

modified code

 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-rows: 50px; grid-auto-flow: column; grid-gap: 10px; } .grid-item { background-color: green; text-align: center; line-height: 50px; color: white; } @media ( max-width: 500px) { .grid-item:nth-child(2) { order: 1; background-color: orange; } } 

 <div class="grid"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> </div> 

Answer 2

I use flexbox for this

 .grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .grid-item { box-sizing: border-box; width: calc( 50% - 5px ); min-height: 50px; margin-bottom: 10px; background-color: green; text-align: center; line-height: 50px; color: white; } .grid-item:nth-child(1) { order: 5; } 

 <div class="grid"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> </div> 

The syntax flex is widely supported and super flexible.