Ever wanted to swap the order of column’s contents on a mobile device so it displays in a different order to the desktop site? For example you may have a desktop layout like this:
However on a mobile device you’d want the image to display first, then the text. In the example above the image would normally render after the text on a standard responsive layout but with a little css we can change the order of the elements to display how we want them to. Add the class “swap-on-mobile” to the parent element and then use the following code to reverse the columns using flexbox.
@media screen and (max-width: 767px) {
.swap-on-mobile {
display: flex !important;
flex-direction: column-reverse;
}
}When viewed on a mobile device the layout now looks like the example below:
