Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 27, 2019 at 11:31 am #1122304
    Rushminute

    I want to reverse the order of two columns for mobile. I’ve read the other posts about using flexbox to reverse column order, but I can’t get it to work.
    Actually, I can get flexbox column-reverse to work for all the columns on the page, but can’t figure out how to apply the class to selectively reverse (or not reverse) the order of elements on the page.
    Do I need to put the two columns within a color section and apply the class (column_flex_reorder) to the color section in the “For Developers: Section ID” or the “Custom CSS Class”?
    Or do I not put the two columns in a color section, but simply add the class (column_flex_reorder) to one or both of the columns in the “Custom CSS Class”?
    I’m developing locally.
    Here’s my Quick CSS:

    @media only screen and (max-width:767px) {
.column_flex_reorder .entry-content-wrapper {
    display: flex !important;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
}
}

    Thx.

    July 27, 2019 at 12:18 pm #1122308
    Guenni007

    well everything you did is correct.
    the direct parent element of the items gets the flex property. So you can have that on a color-section your class.
    If you just want to do reverse, everything is ok.
    So from 1,2,3 becomes 3,2,1

    However, if you want to determine the order, you can set it to the flex items 

    @media only screen and (max-width:767px) {
.column_flex_reorder .entry-content-wrapper {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
}
  .column_flex_reorder .av_one_third:nth-child(1) {
    order:2
  }
  .column_flex_reorder .av_one_third:nth-child(2) {
    order:3
  }
  .column_flex_reorder .av_one_third:nth-child(3) {
    order:1
  }
}

    nice Articel here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Test page: https://webers-testseite.de/defined-order/

    July 27, 2019 at 3:19 pm #1122326
    Rushminute

    Awesome tips, Guenni007.

    I realized flexbox’s column-reverse can’t be previewed just by resizing the browser window on my desktop computer. I had to create a test page on a live site so I could see the column’s reverse on my mobile phone.

    Beautiful, clean solution. Many thanks for the quick response. :)

    July 27, 2019 at 5:34 pm #1122389
    Victoria

    Hi Rushminute,

    Glad you got it working for you with Guenni007’s help! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.