Row Layout – stack order in smartphone view

[gm713]

Hi. I want to set the order for how elements stack vertically in smartphone view, when placed in a row.

As an example, consider a  50/50 row. Normally the elements in the left column will stack above the elements in the right column. I want to reverse it i.e. elements in right column should stack above the elements in left column.

How do I accomplish that?

[Kieran_SQ]

Hi @gm713,

I am going to forward this ticket to one of our developers as I do not have a solution for you, they will be in touch either on Monday or Tuesday.

Thanks for your patience,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[gm713]

Hi. Wanted to follow up on this. Thanks!

[Radu]

Hi,

Can I view that page to can see exactly your landing page? now it says maintenance

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[gm713]

We’re in the process of overhauling the website, but here’s what you can do to replicate it.

Create a row with 2 columns in a span6 + span6 format. Add text block on left and image on right. When browser size is reduced to smart phone view, the text (left block) appears on top and image (right block) appears below.

I want to flip that order so that the image block appears on top and text appears below.

[Radu]

Hi,

Just add a custom class for the main row named <b>custom-cols-order</b>

Then for the first column (left one) add a custom class named <b>float-left-flip</b> and for the second (the right one) add this class name <b>float-right-flip</b>

Then add the css to wp-admin -> theme options -> General settings -> Quick CSS

COPY CODE

@media(max-width:991px){
    .custom-cols-order .vc_row {display: grid;}
    .float-left-flip {order: 2 !important;}
    .float-right-flip {order: 1 !important;}
}

That’s it
Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[gm713]

Unfortunately, that didn’t work. Just to be sure I’m entering this in the correct field (see attached), right?

Also, any reason why I shouldn’t enter this in style.css in child theme? I would like all my css mods to be in one place, and I prefer it there.

Attachments:

You must be logged in to view attached files.

[Radu]

Remove the

COPY CODE

<b> </b>

tags

from that field, leave only custom-cols-order class.

Then add the css to wp-admin -> theme options -> General settings -> Quick CSS or in style.css frmo child theme ass you wish

COPY CODE

@media(max-width:991px){
    .custom-cols-order .vc_row {display: grid;}
    .float-left-flip {order: 2 !important;}
    .float-right-flip {order: 1 !important;}
}

Then add this class float-left-flip to the first column and this float-right-flip to the second.

Then in mobile those will be in reverse order

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[gm713]

That worked beautifully. Thanks!

[gm713]

Hi Radu,

While this seems to work at Tablet view, when the view is changed to smartphone view, the right column seems to go back below the left column.

Can you please take a look. Thanks!

[gm713]

To add more details, it flips back to the original order at 768px and below.

[Radu]

Hi,

Add also this css beside that

@media(max-width:640px){
.custom-cols-order .vc_row {display: grid !important;}
.float-left-flip {order: 2 !important;}
.float-right-flip {order: 1 !important;}
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[gm713]

That did it, thanks!

[Radu]

Great
Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts