Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #804091

    Hello there!

    I am using colour sections with a 2 column layout. Image on one side and text on the other.

    Because I have alternated the column order for desktop, the mobile view has the columns stacking with 2 images in a row.

    I would like to know if it is possible to change the stacking order of the columns so the image is always first in the mobile version of the webpage?

    Thanks in advance for any help.


    Hey Net-Impact,

    I think the workaround for that is to first enable the Custom Css Classes: . Then on the section where the image is last, add a class name of hide-mobile then duplicate it, for the duplicate change the class name to show-mobile then change the position of the image to show first. Then on Quick CSS (located in Enfold > General Styling), add this css code>:

    .show-mobile {
      display: none;
    @media only screen and (max-width:767px) {
      .show-mobile {
        display: block;
      .hide-mobile {
        display: none;

    Hope this helps :)

    Best regards,


    Aloha Nikko,

    This ends up being a really common requirement for many of our projects, and it would be great if this were handled more gracefully in the theme. Duplicating sections and then hiding them on various screen sizes is not ideal for a variety of reasons including web accessibility. We do not want people using screen readers to get a bunch of duplicate content.

    So here is our solution for alternating the stacking order of one-half blocks within a color section.

    1) Arrange the one-half blocks in the correct order that you want them to stack on mobile, which will be opposite of how they appear on desktop.
    2) Add a class called switcharoo to the Color Section.
    3) Add the css code below wherever you make your CSS edits. You may need to remove the +30px if you are not using Space Between Columns.

    @media screen and ( min-width: 768px ) {
    .switcharoo .av_one_half.avia-builder-el-first {
    left: calc(50% + 30px);
    .switcharoo .av_one_half.avia-builder-el-last {
    right: calc(50% + 30px);

    David Fry
    Tanuki Interactive


    Hi David Fry,

    Thanks for posting your solution :)
    Since a lot of browsers are supporting flexbox this can also be used as an alternative solution without hiding an element.

    Best regards,


    Hello, this post is close to a problem I am working on. I sorely miss not being able to manage columns with something like Bootstrap. In a template I’m building,
    [ 1/3 column A ] [ 2/3 column B ]

    I want to reorder in mobile so I get this outcome:
    [ 1/1 column B ]
    [ 1/1 column A ]
    In order to rearrange with Flexbox, I’d need to have a row container. I can’t figure out how to get that. I’m not able to add an outer row to add inner columns like you can do with Visual Composer or more broadly, Bootstrap.

    I want to use this where the blocks exist in a section or row and I reverse direction on mobile.

    But I can’t seem to find how to contain the two. I tried the switcheroo script, I’ll study that calc, however it is not working for me.



    Hi shrinkray,

    Can you give us a link to the page mentioned? and point out those columns so we can inspect and try to give you the solution that should work.

    Best regards,


    Hi Nikko,
    Thanks for jumping in.

    This is the current page.

    Below is a link to a design showing the desktop vs mobile layout. I apologize for not being more knowledgeable about Enfold. I didn’t know the version was out of date, I will add that to my list of things to check. Since reporting this problem, I’ve had other issues with your page tools; now clearly the version is responsible. I’m so glad you pointed that out. I love to learn how to get better mobile experience out of layouts.



    @shrinkray: The site is private and is asking for authentication. Please create your own ticket and post the additional details in the private field. Don’t forget to include the link of this thread for reference.

    Best regards,


    OK; I thought I did.
    New post title is: ‘Mobile stacking order for uneven width columns


    My solution was to combine DavidKFry’s and Nikko’s solutions.

    Put your columns in a Color Section. Give that Color Section a class of .flip-mobile.
    Set first column in each row to be “Equal Height”. Then add this css.

    @media only screen and (max-width: 767px) {
    	.flip-mobile .flex_column_table {
    		display:flex !important;
    	.flip-mobile .flex_column_table .flex_column {
    		flex:0 0 auto;

    Be sure to use a separate Color Section for each group you want to flip. If you do your entire page in one Color Section it will show the bottom at the top.

    I would like to see enfold use Flex for those equal columns, instead of the display: table and display: table-cell. But I know that wasn’t always supported.
    Hope it helps others.


    by the way in that case of 2 columns this is the fastest method. If you got multiple columns you can let the flex-direction to normal but give to the items an order number:

    see here in action with code :

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

You must be logged in to reply to this topic.