Skip to content

Reversing Columns on Mobile Layout

Use the following codes to rearrange up to six columns in a single row on mobile devices. This can be helpful if you have alternating rows with images alternating left and right, but on mobile, you want all the images above their corresponding text. 

It can also be used to place a left widgetized sidebar after the main content on mobile so that the page's content is the first thing users see, followed by the sidebar.

  • reverse_row class goes on the row
  • first-on-mobile
    second-on-mobile
    third-on-mobile
    fifth-on-mobile
    sixth-on-mobile
    classes go on the columns in the order you want them displayed on mobile.

Keywords: reverse, columns, rows, class, classes, reversing, mobile, desktop, layout, images

Feedback and Knowledge Base