From floats to flexbox

In this section, we'll get to work and change our columns module from a float-based layout to a flexbox-based layout (I'm excited!).

First, we'll remove all the float-related properties from the columns and break them down to square one; then, we'll use display: flex to transform the float layout into our flexbox-based layout to see immediate results. Finally, we'll explore how flex-direction will be useful in a responsive design; we'll discuss this when we get down to smaller screen sizes.

Removing float-related properties from the columns section

OK, here's our three-column layout:

Let's recall how it moves to a one-column tube at smaller widths:

Alright, let...