Is it possible in CSS to change the order of an image and text on my Contact page?

[DevinDnl]

I am busy creating our contact page on: https://www.weloveyourface.nl/pages/contact

In our theme I can only shift the contact form from left to right as far as the layout settings go.
Currently the page shows an image and below the image a header and text.
We would like to change the order here.

First we would like to show the header, then the text and finally an image.

currently:

Desired:

Is this possible with just css?

[SagarSukhanandi]

@DevinDnl Could you please share store password?

[DevinDnl]

@SagarSukhanandi 

Sorry, here is the preview URL: https://5l7hpp0qu9qtetw4-52632682660.shopifypreview.com/pages/contact

[SagarSukhanandi · Accepted solution]

Hello @DevinDnl 


Add below code at end of your css file

.contact__form-content{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.contact__form-subheading{
     order: 1 !important;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;  
}
.contact__form-text{
    order: 2 !important;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;  
}
.image-element__wrap{
    order: 3 !important;
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;  
}

It works for me. Here is the image 

[DevinDnl]

@SagarSukhanandi 

It works indeed.
Thanks a lot.

[SagarSukhanandi]

Thank you @DevinDnl 

Could you please like all my messages? It will help me to build good profile