woman in blue denim jacket and white and black polka dot pants sitting on white chair

$249.00

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer Took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently.
Shop Now

$249.00

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer Took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently.

Shop Now
person holding brown and black round food on white ceramic plate

The Challenge

I have seen several posts asking how to rearrange alternating image and text blocks so that the order on mobile isn’t image, text, text, image. In older versions of Avada (prior to 7), this was either accomplished with duplicate containers or custom css – not as easy as it should be. With the release of 7, this became quite easy with the addition of the order attribute in the column settings for mobile and tablet layouts. By default Avada sets the order of every column to 0 which means that they will appear in the order they were added. If you need to rearrange, just change the order value. Like most things web related, this uses 0 as the first position. In the example above the only change that had to be made was to set the order value of the dark gray box to 1, moving it after the muffin image box. Keep in mind that the order is container based, so if you use multiple columns in a single container, you will have to account for each one. I strongly recommend, using a scenario like this that you limit your container to two columns, and add multiple containers.

The Them Fusion team has a great video that covers these and other responsive design features.

Note: Changing the order only affects the visual order and not the order in the DOM, so assistive technologies will still “see” the original layout. This is import for accessibility. For this reason I have submitted a feature request to add order to the desktop settings are well.