Debut Theme - Change order of grid__item in mobile view

Alissa
Shopify Partner
4 0 0

Good Morning,

I'm trying to figure out how to change the order of grid__item in mobile view in the Debut Theme.

I have this layout on a page, and would like to have the second grid__item above the first on mobile view.

<div class="grid__item medium-up--two-thirds">
</div>

<div class="grid__item medium-up--one-third">

</div>

 

I can't find anything in the stylesheet.  Before I just code it in, am I missing something obvious?

Many thanks

 

0 Likes
oscprofesionals
Shopify Partner
3 1 0

Hello ,

0 Likes

Hello Alissa,

It is possible with flexbox.

Please Share with me your site url.

So That I will give you exact solution

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

like this we can reverse order 
.row {
-webkit-flex-direction: row;
flex-direction: row;
}

.row-reverse {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
Alissa
Shopify Partner
4 0 0

If flexbox is the answer then I can code that in.

I was just wondering if there was a trick within Debut that I couldn't find.

0 Likes
Alissa
Shopify Partner
4 0 0

How would that change the order of the grid in mobile view?

looping through a grid doesn't change grid order.

0 Likes

Add css to theme.scss file

 

Make dispaly:flex; to main div

 

after that

@media only screen and (max-width: 749px) {
.grid__item.medium-up--two-thirds{order:2;} .grid__item.medium-up--one-third{order:1;}
}

But If you share site url I will give you exact solution

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Alissa
Shopify Partner
4 0 0

Got it to work.  Thank you x

0 Likes
potandberry
Tourist
4 0 1

Hi, I want to do a similar thing. On the debut standard product page on mobile I would like the description to appear before the image. But keep the desktop image on the left and description on the right. I don't want to do it for every product, just in a new product template I have been building. Can you walk me through the solution? Thanks so much.

 

0 Likes