Pictures befor text on mobile

Hey McCreight_Media,
You maybe able to use float to change at mobile view, like this:

@media only screen and (max-width: 767px) { 
#ID-of-img {float: left !important; 
#ID-of-text {float: right !important; 
}

you will need to add ID’s to the two elements and change the code according

Best regards,
Mike

Hi,
Please Turn on Custom CSS Class field for all ALB Elements
Then you can add custom classes to the elements, sorry I mis-spoke when I said “ID’s”

Best regards,
Mike

Hi,
Sorry, I had mis-spoke, when using custom classes your css should look like this:

@media only screen and (max-width: 767px) { 
.class-of-img {float: left !important;} 
.class-of-text {float: right !important;}
}

Best regards,
Mike

Hi,
Another approach would be to have a duplicate section of the “WordPress CMS” text and image under the current one, and use the custom classes to hide one on mobile and the other on desktop. In the duplicate section reverse the image and text and use custom css like this to show one or the other on the correct device.

@media only screen and (max-width: 767px) {
.wp-text,.wp-picture {display: none !important;}
}
@media only screen and (min-width: 768px) { 
.wp-text-2,.wp-picture-2 {display: none !important;}
}

This is where “wp-text-2 & wp-picture-2” are your new classes for the mobile view, and “wp-text & wp-picture” are your current classes for the desktop view. Also do not put a HR between the two.

Best regards,
Mike