How to display and order a two column post layout with flex or grid

[snippet248]

This is what I have so far(check the image below), and is all good except for the order, that should instead be: first 3 items to the left column from top to bottom, and last 3 items in the right column form top to bottom, that is by event date from recent to older.
Image-link: https://drive.google.com/open?id=1gKanyP4RofhzXDa3__pXAxhpnlVxr4lP
When using flex I get this instead
https://drive.google.com/open?id=1ebRqau-4H3BiKuJToszAMd5ICKdsTMYj

 

           


                


                    

               
                

           </div>
 </div>

not sure why the html is not beign shown here in the forum
anyway the structure is like this

+class=”contenedor-col-loop-act-vlista”>

++class=”col-lg-6 col-md-6 col-sm-12 col-xs-12 borde-hover order-lista”>

+++class=”flex-modo-lista”>

++++content goes here

And the css do note I have tried many things hence the commented lines

.contenedor-col-loop-act-vlista {
display: flex;
flex-direction: column;
justify-content: flex-start;
flex-wrap: wrap;
column-count: 2;
flex-basis:50%;
/display: grid;/
/*
display: flex;
flex-direction: column;
flex-wrap: nowrap;
column-count: 2;
max-height: 200px;*/
}
.order-lista {

}

[Paulie_D]

A minimal code demo of the issue in Codepen.io is preferred to random links and a mere snippet of CSS.

[snippet248]

Okey here it is
https://codepen.io/Snippet/pen/VqzqKe
fiirst codepen i create so if there are any errors jus let me know and I will fix it.

[Paulie_D]

Unfortunately, if you are using a flex-column where you need it to wrap, then it must have a defined (or calculable) height so that the column knows when to wrap.

https://codepen.io/Paulie-D/pen/EGwKem

[snippet248]

Okey thanks for the reply.. well the idea is that everything is not in a single line, that means in other words that
List 1: is in the left column, first row
List 2: in the left column, second row
List 3: in the right column, first row
List 4: in the right column, second row
and then it goes for the 12 lists.

Something I must be doing wrong since… added height among other tests…

[Paulie_D]

Perhaps you could mock something up (or do you have a design image) as I’m not clear on what this should look like…

[snippet248]

Here it is
https://drive.google.com/open?id=1bnT75dk-GrIOKot8DyafEAN_n5E6-kMc
Do note the idea is that it is sorted by date

[snippet248]

Please let me know if I should post the image elsewhere.

[snippet248]

That’s it (the updated codepen)!!! Thank you so much Paulie_D :-) Have a great year!!!

[Author]

Posts