Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 29, 2018 at 12:22 am #963469
    sjwmobile

    Hi Support,

    I have a 3 column layout (1/4, 1/2, 1/4) on my homepage.

    On smartphone’s the columns stack vertically 1/4, 1/2, 1/4 (1,2,3) as you’d expect.

    I’d like to reorder this to be 1/2, 1/4, 1/4 (2,1,3) – what’s the best way to achieve this? I’ve seen some forum posts discuss creating duplicate elements etc, but perhaps you can provide more detail on this please as I wasn’t sure.

    Have included a link to my site in private content.

    Thank you!

    May 30, 2018 at 8:55 pm #964490
    Basilis

    Hey sjwmobile,

    Here is a solution on how to achieve something like taht
    https://kriesi.at/support/topic/swap-columns-on-mobile/

    Best regards,
    Basilis

    May 30, 2018 at 11:27 pm #964560
    sjwmobile

    Thanks Basilis.
    I’ve tried to follow the instructions at the link you provided, assigned each column a css class and then tried to add the css below;

    @media only screen and (max-width:767px) {
  .responsive #top .flex_column_table,
  .home-left-col .entry-content-wrapper {
    display: flex !important;
    flex-direction: column-reverse;
  }
}

    The left column of my homepage was assigned the class home-left-col

    However, it doesn’t seem to have affected the order of display on mobile.

    As mentioned, on smartphone’s the columns stack vertically 1/4, 1/2, 1/4 (1,2,3) and I’d really like them to be 1/2, 1/4, 1/4 (2,1,3)

    Have provided login details in Private Content – would really appreciate if you could take a look and steer me in the right direction please.

    Thanks!

    June 4, 2018 at 5:29 am #966294
    Ismael

    Hi,

    Thank you for the update.

    Remove the previous css code and use this one instead.

    @media only screen and (max-width: 767px) {
.responsive .home .content .entry-content-wrapper {
    padding: 0;
    display: flex !important;
}

.responsive .home .content .entry-content-wrapper .flex_column:nth-child(3) {
    order: 1;
}
}

    Best regards,
    Ismael

    June 5, 2018 at 12:10 am #966914
    sjwmobile

    Thanks Ismael. I removed the custom css classes from each column and replaced the CSS snippet with what you provided but it’s not displaying correctly.

    Columns are no longer ‘stacking’ now and are aligned beside each other (1,3,2) on smartphones (with no padding/spacing in between).

    Any idea why it’s not working?

    Thanks,

    Sam

    June 7, 2018 at 12:33 am #968127
    Vinay

    Hi,

    I have created a test page for you. Please check the link in private content.

    Add 2 color sections one for mobile and one for desktop and all your columns inside it.

    Hide the desktop version on mobile from screen option.
    Hide the mobile version on desktop from screen option.

    For alternate ways using CSS please check

    Columns

    Best regards,
    Vinay

    June 8, 2018 at 2:33 pm #970091
    sjwmobile

    That’s perfect Vinay – exactly what I needed. Thank you!

    June 8, 2018 at 4:08 pm #970127
    Jordan Shannon

    Hi,

    I’m glad you got this corrected. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Reordering Columns on Responsive Versions’ is closed to new replies.