Two-column layouts

Using bootstrap layout classes for a variety of layout settings - assumes mult-column layout kicks in at the 'lg' breakpoint.

For the row, optionally use align-items-center to make content veritcally centred.

For the columns use order-* and order-lg-* classes to decide which column appears first.

Columns widths can be set width boostrap classes, eg col-lg-9.

Text and Image demo - vertically aligned top. Image comes first on mobile, second on desktop:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa.

Maecenas fermentum nibh id tristique pharetra. Quisque consequat cursus odio. Phasellus sit amet leo lectus. Pellentesque sit amet ultrices nulla. Aliquam quis venenatis metus. Nullam leo elit, sodales vel purus et, maximus aliquam dolor.

As above but with a 75/25 column width (using bootstrap classes):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa.

Maecenas fermentum nibh id tristique pharetra. Quisque consequat cursus odio. Phasellus sit amet leo lectus. Pellentesque sit amet ultrices nulla. Aliquam quis venenatis metus. Nullam leo elit, sodales vel purus et, maximus aliquam dolor.

Text and Image demo - vertically aligned center. Image comes second on mobile, first on desktop:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit. Morbi id gravida eros, quis dignissim augue. Mauris vehicula, tortor ut facilisis interdum, mauris est rutrum est, in maximus felis dolor hendrerit massa.

Maecenas fermentum nibh id tristique pharetra. Quisque consequat cursus odio. Phasellus sit amet leo lectus. Pellentesque sit amet ultrices nulla. Aliquam quis venenatis metus. Nullam leo elit, sodales vel purus et, maximus aliquam dolor.