Changing order of divs with display block [closed]

I have the following problem:

I want to reorder the 12 divs on my site once the window is sized down to tablet and mobile size. I tried it with css property display: flex and changing the order value.

Unfortunately here I run into a problem. I have implemented the w3 school element filter, which stops working once I change the display:block property of the .show class from the w3 Filter.

For better understanding I have attached an image of what I want to achieve. Anyone knows if there is a way to get there, without losing the functionality of the element selector?

see what I mean