How do I move the title under the product image on mobile?

Site URL: https://sundogbread.com/preorder/traditional-sourdough

Hi! How do I move the product title under the product image on the product page on mobile? I'm using Motto template. This is the mobile site now, I would like to move the product title under the product image, above the description. 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
section.ProductItem-summary.clear {
    display: flex;
    flex-direction: column;
}
figure.ProductItem-gallery {
    order: 1;
}
section.ProductItem-details.ProductItem-details--mobile {
    order: 2;
}
section.ProductItem-details {
    order: 3;
}
}

Hey! I have the same problem. What i need to do is have (in top to bottom order, on mobile view)

ProductItem title > Gallery > description > Variants > Add to cart button. 

I tried making a custom flexbox but to no avail . Here is the website : https://www.themaycircle.com/shop/p/graduate-from-home

Password is : manaaryug_tmc

Thanks! @tuanphan

I managed to get results with the following, which works for me,  but the title still wont come at top.

@media screen and (max-width:640px) {
section.ProductItem-summary.clear {
    display: flex;
    flex-direction: column;
}
figure.ProductItem-gallery {
    order: 0;
}

.collection-type-products .ProductItem-details .ProductItem-details-excerpt {
    order: 2;
}
.collection-type-products .ProductItem-details h1.ProductItem-details-title{order:1;}
}

Ive put order 1 in title here because putting it down as 0 doesnt work. And even starting the order from 1 among these doesnt work either sigh

On 8/14/2020 at 6:40 AM, Yugvir said:

I managed to get results with the following, which works for me,  but the title still wont come at top.

@media screen and (max-width:640px) {
section.ProductItem-summary.clear {
    display: flex;
    flex-direction: column;
}
figure.ProductItem-gallery {
    order: 0;
}

.collection-type-products .ProductItem-details .ProductItem-details-excerpt {
    order: 2;
}
.collection-type-products .ProductItem-details h1.ProductItem-details-title{order:1;}
}

Ive put order 1 in title here because putting it down as 0 doesnt work. And even starting the order from 1 among these doesnt work either sigh

Did you solve?

@tuanphan Yeah, I realised this works for me! 

Hi @tuanphan

Is there a way to create some space between the product title and the images above?

13 hours ago, Rjafadi said:

Hi @tuanphan

Is there a way to create some space between the product title and the images above?

Can you share link to product page?