The power of Bootstrap 4 flexbox columns and ordering

I have built a replica of part of a BSS users site regarding an issue of aligning and moving columns about.

The following example starts with the paragraph columns listed first in the HTML followed by the icons. Using 1 row and 6 columns.

Being mobile first the idea is that the icons are displayed to the left of their corresponding paragraph columns with the icons being small. Then as the site moves to a wider screen size the icons and paragraph columns will alternate sides. This is done by using Bootstraps "col-" classes and the "order-" classes with some help from the "offset-" classes to help keep it centered in the content section.


Every entrepreneur starts small, but nobody becomes an entrepreneur to stay small.

You work hard on your business and it soon gets bigger.

But, despite all your hard work, your growth seems to be stagnating. This is an important turning point in every company.

What now?

You can now do two things:

1) haphazardly continue to work hard and hope that enough people will find your company of their own, or

2) find out in detail who your target group is, what they are looking for and approach them efficiently.

The latter is what Portrayal specializes in.
As an entrepreneur you want to be findable online and reach the right people to continue growing. Often, time, resources or knowledge are lacking to keep track of this yourself.

We believe that starting entrepreneurs and start-ups deserve a chance to grow.