Reorder Stacking on Mobile

Site URL: https://www.ericsdream.world/motorcycle-signal-indicator

Hello everyone,

I am seeking assistance with how I can reorder the display order for mobile of my page here - https://www.ericsdream.world/motorcycle-signal-indicator. Currently, the mobile display orders everything vertically based on left to right; however, I want to have the text first followed by the images, so I would need to reverse the display of rows 2, 4, 6, and 8. I attempted a few code alterations I found utilizing flex and flex-direction but I couldn't seem to get this to work. Any thoughts?

Thanks!

Hi. What should it look like?

47 minutes ago, tuanphan said:

Hi. What should it look like?

Hello and thanks for replying! Using the page as a reference beginning with the drawing row (after the 3rd white line divider), I currently have (left to right) Image - Text followed by Text - Image on desktop. When viewing on mobile, it vertically loads as:

Image

Text

Text

Image

So, I am trying to reverse the order of the second row so it views as:

Image 

Text

Image

Text

I had thought I could use flex and flex-direction as I did on another one of my pages; however, altering that code is not working for this instance so I'm not sure if this is possible or if I might be using the wrong selector.

For reference, this is the code I was trying (I tried adjusting the nth-child parameter and no number yielded any type of reaction on the page - I also tried testing the code by using it to shut off row visibility but also received no reaction):

@media screen and (max-width:767px) {

div#page-62ce2c8c4b497007840bec21 .span-12>.row:nth-child(6) {

    display: flex;

    flex-direction: column-reverse;

}

}

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1661009258166_23638+.row {
    display: flex;
    flex-direction: column-reverse;
}
div#block-yui_3_17_2_1_1661009258166_31232+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

On 8/22/2022 at 10:36 PM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1661009258166_23638+.row {
    display: flex;
    flex-direction: column-reverse;
}
div#block-yui_3_17_2_1_1661009258166_31232+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

 

Magnificent, thank you for this! This did work and I was able to find the respective selectors to adjust throughout the page. (After consideration I was looking for text first then image, so just the matter of selecting those rows for column-reverse instead)

Thanks again!