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

Solved
DevinDnl
Tourist
8 0 4

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:

DevinDnl_0-1614021466568.png


Desired:

DevinDnl_1-1614021567838.png


Is this possible with just css?

 

0 Likes
SagarSukhanandi
New Member
99 17 30

@DevinDnl Could you please share store password?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
SagarSukhanandi
New Member
99 17 30

This is an 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 
contact.PNG

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
DevinDnl
Tourist
8 0 4

@SagarSukhanandi 

It works indeed.
Thanks a lot.

0 Likes
SagarSukhanandi
New Member
99 17 30

Thank you @DevinDnl 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help