Changing order of blocks from elementor

Hi,

I'm trying to create a page that looks like the full-width image/text blocks on the frontpage of the aspire page in your library. However, i can't seem to figure out how to change the order of the blocks when rendered on mobile, on PC i get the correct image, text, image, text order, but on phone i get image, text, text image.

I tried adding to my css, but it doesn't seem to work. .order1 and .order2 are the classes i added to the columns in elementor.

@media (max-width: 768px) {
.site-content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

.order1 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}

.order2 {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}

}