Level 61
Try grid grid-cols-2 sm:grid-cols-1
Mar 12, 2021
6
Level 22
Re-order collection on mobile with CSS Grid and Tailwind
Hi!
Here's what I'm trying to achieve but I'm a bit lost.. I'm looping throug a Eloquent collection and then, in the blade view, construct my grid with TailwindCSS and the grid grid-cols-1 sm:grid-cols-1 layout.
But, on each "line", the two blocs are linked in desktop version but should be re-organized differently on mobile to keep this odd/even order. Is this behaviour possible only with the tailwind framework?
Any help would be appreciated :-)
Level 22
Hi @bugsysha !
If you look the order of the mobile version, you can see that the number 4 and 8 are reversed to keep the odd/even colors of the tiles. I've tried your approach but doesn't solve the question..
Level 61
LOL, by brain just skipped that details like in a misspelled word 🤒
Level 61
As a simplest solution I would probably have one div that is visible just for mobile and one just for larger screens. For mobile I would sort items as following:
collect([1,2,3,4,5,6,7,8,9,10])
->sortBy(function ($num) {
return $num % 2 === 0;
});
// 1,3,5,7,9,2,4,6,8,10
Level 1
Flexbox and order are your friends
Level 61
He can use order in grid also.
Please or to participate in this conversation.