Debut Theme - Change order of grid__item in mobile view

Tourist
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
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

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
1 Like

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
Tourist
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
Tourist
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

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Highlighted
Tourist
4 0 0

Got it to work.  Thank you x

0 Likes