A website was using WordPress’ blocks. Two columns with text in the left hand column and an image in the right hand column.
I wished to position the sidebar below the main content when viewing using the smaller screen sizes of phones and tablets.
Here the layout. With the image on the left and the text on the left.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien.
Est pellentesque elit ullamcorper dignissim.
On the larger devices the image on the right of the text works well. But if left as above the text precedes the image on the smaller devices, mobile or tablet. I like the image to show above the text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien.
Est pellentesque elit ullamcorper dignissim.
CSS classes are used to define the presentation of a web page. Within a class the text colour and size can be set, along with the background colour. There are many other options too which can be configured.
Websites based upon Bootstrap can use the order classes to define the sequence of two columns for different screen sizes..
Many websites manage the response to different devices by using breakpoints. The values are configured as apart of the website design. With Bootstrap they are referenced by the use of xs, sm, md, lg. rotating a phone or tablet will change the screen size and the qualifying breakpoint.
Examples of the order classes are:
- order-2 – the element (column in our example) will be shown second
- order-xs-2 – the element will be shown second where the screen width is wider than extra small
- order-sm-2 – the element will be shown second where the screen width is wider than small
- order-md-2 – the element will be shown second where the screen width is wider than medium
- order-lg-2 – the element will be shown second where the screen width is wider than large
To configure the order of the two columns two classes will be added to each of the columns in the row.
To add the class to the left hand text column. Click on the text and then at the foot of the page click on the column in the sequence
Post > Columns > Column > Paragraph
In the settings on the right hand side ensure that the block tab is selected. Expand the Advanced section. In the Additional CSS Classes add:
order-2 order-lg-1
Similarly access the settings for the column containing the image
Post > Columns > Column > Image
Click on column and expand the section Advanced and add the CSS Classes to Additional CSS Classes
order-1 order-lg-2
In the above, we are using the two classes to set the default order value for the column, for example order-2 represents showing the column second and to configure the columns order for devices which are wider than the lg (large) breakpoint order-lg-2.
Dependant upon your layout you may wish to experiment with selecting whether the image size should be medium, large, or full size. Also trial setting the breakpoint size with order-md-1 and order-md-2.
Using the Bootstrap order classes the sequence of two columns of the WordPress column block can be changed according to device screen width.
