How to change order of widgets in mobile view?

Hello,

Is it possible to display widgets in a specific order in mobile view?

I'm trying to show the widget "top premium porn sites" first but without success.

This is the CSS code that I'm trying:

@media (max-width: 767px)
.maddos-directory #top-premium-porn-sites {
display: grid;
order:-1;
}
}

Code (markup):

This is my (NSFW) site:

https://bestlistofporn.com

Code (markup):

What I'm I doing wrong?
Please help...

Thanks!

 

I found out that I can order my site columns with this code:

@media screen and (max-width: 767px) {
.maddos-directory,
.maddos-column {
display: flex;
flex-direction: column;
}
.column1 {
order: 2;
}
.column2 {
order: 3;
}
.column3 {
order: 4;
}
.column4 {
order: 1;
}
}

Code (markup):

But I need to order my widgets instead.
Any ideas, please?

 

Can someone help me, please?