Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #478990

    Hello!

    I am trying to change the order on my flex columns (av_one_half)’s when in responsive mode.

    I googled some and found some CSS code that I adjusted to this:

    .flex_column {
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    }
    .avia-builder-el-6 {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
    }
    .avia-builder-el-4 {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
    }`

    #479416

    Hi QBDSwedenAB!

    Thank you for using Enfold.

    Did it work? The box-ordinal-group css property is currently not supported on all browsers specially on IE and it requires that the column display is set to flex. You will have to come up with another solution, probably, by using javascript. Or creating another set of columns with different order. Use css media queries to hide and show these columns on different screen sizes.

    Regards,
    Ismael

    #479926

    Hi again!

    Thanks as always for your resposnse Ismael. The dislay hide/show solution would be one way, but it makes the loading time much longer, since it will be duplicate images. The javascript would be optimal, but I don’t that.

    The con of using this box-ordinal-group css would be for mobile users using Internet Explorer. However, it’s very few using IE on their cellphones/surfpads, therefore it’s worth it in my opinion, and even for those users, they will only face some small order errors.

    But to ask your question, no I did not get it to work. Would you take your time and check my code and see what’s missing?

    #480685

    Hey!

    Where did you add the columns? What page? Please add the url here.

    Regards,
    Ismael

    #480964

    I’d like to change the order of a image and text

    #481754

    Could you find the correct code?

    #483596

    To summarize what I’d like to make with CSS is to:

    Change the order of the elements.

    #483649

    Hey!

    I’m afraid the flexible box layout is not going to work on your current setup. All columns inside the container will be affected by the box and box orientation property. You can see an example here: http://robertnyman.com/css3/flexible-box-layout/flexible-box-layout.html

    Anyway, you can try this:

    #after_section_2 .content .entry-content-wrapper {
        width: 100%;
        display: -moz-box;
        display: -webkit-box;
        display: box;
        -moz-box-orient: vertical;
        -webkit-box-orient: vertical;
        box-orient: vertical;
    }
    
    #after_section_2 .content .entry-content-wrapper .flex_column:nth-child(1) {
        -moz-box-ordinal-group: 3;
        -webkit-box-ordinal-group: 3;
        box-ordinal-group: 3;
    }
    
    #after_section_2 .content .entry-content-wrapper .flex_column:nth-child(2) {
        -moz-box-ordinal-group: 2;
        -webkit-box-ordinal-group: 2;
        box-ordinal-group: 2;
    }
    
    #after_section_2 .content .entry-content-wrapper .flex_column:nth-child(3) {
        -moz-box-ordinal-group: 1;
        -webkit-box-ordinal-group: 1;
        box-ordinal-group: 1;
    }

    If it doesn’t work, please create another set of columns then use css media queries. Or try to use a mobile redirect plugin: https://wordpress.org/plugins/advanced-mobile-redirect/

    Cheers!
    Ismael

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.