The demonstration of this process can be found in the text of the article.

Implementation:

As you may have guessed, the column-count property specifies the number of columns and column-gap – the distance between the columns. There are also additional features: column-width, allowing strictly set the width of columns and column-rule, which determines the divider between the columns (for example, 1px dotted #ccc, to separate columns dotted line). In addition, you can use prefixes and -webkit- and -moz- to support older versions of browsers. Thus, you can control columns, simply by changing the numerical values of the properties.

Adaptive multi-column text

What if our website has “rubber” layout and its width can vary, for example, from 320px to 1200px? In this case, we have the support of such a feature CSS, as a “media queries” (allowing to change the css-properties of the different objects, depending on the width of the user’s screen).
Let’s add after the above classes the following snippet:

This fragment is as follows: if the width of the screen is greater than or equal 1024px, let’s apply the properties contained in the block. In our case, we will overwrite some of the properties class: .three number of columns from the two will increase to three. Ok, it’s for large monitors. Let’s  care of mobile devices – it does not need a column, so let’s go one step further and add a piece of code:

This code will work when the screen width 480px and less and display all of the text in one column.
Thus, we have the following scheme:

Screen Width <= 480px – one column of text.
Screen width from 480px to 1024px – two columns.
Screen width> = 1024px – three columns.