@tuanphan I'm facing a similar problem! I've a page where I created a logo wall using single images organized in three columns (see image below).
I used the code you posted in another page (pw: test123) to allow for a two-column view in mobile, and it works great, except that the order of the logos is off... I want it to go row by row, that is first the first logo in the first column, then the first logo in the second column, then the first logo in the third column, then the second logo in the first column, etc....
1 2 3
4 5 6
7 8 9
And i neeed it to be
1 2
3 4
5 6
7 8
9
The code I used is the following:
/* 2 columns logos How to Listen*/
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1620851946936_20487+.row>.col {
float: left !important;
width: 50% !important;
}
div#block-yui_3_17_2_1_1620851946936_20487+.row>.col:nth-child(2n+1) {
clear: left;
}
}
/* 2 columns logos Sponsors and Partners*/
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1620851486472_43420+.row>.col> {
float: left !important;
width: 50% !important;
}
div#block-yui_3_17_2_1_1620851486472_43420+.row>.col:nth-child(2n+1) {
clear: left;
}
}
/* 2 columns logos Nonprofit Partners and Resources*/
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1620529247377_87964+.row>.col {
float: left !important;
width: 50% !important;
}
div#block-yui_3_17_2_1_1620529247377_87964+.row>.col:nth-child(2n+1) {
clear: left;
}
}
You'll see that I want to replicate this two-column layout both on the "How to listen" section above, and the "Nonprofit Partners and Resources" below