Different definitions of mobile first strategies exist. Mobile first strategies were introduced by companies that created the designs for mobile devices before the desktop designs. First, mobile devices not only had small screens, but they also supported a limited set of CSS and JavaScript features.
Nowadays, you can use CSS media queries, as discussed in the Media Queries with Breakpoint recipe of Chapter 8, Advanced Sass Coding, to change your designs depending on the screen size of your user's device. When using CSS media queries to create responsive websites, the mobile first strategy is more like a way of organizing your code. In this recipe, you will learn how to organize your code using a mobile first strategy.
In this recipe, you will use a CSS media query that will set the height of the CSS columns depending on the width of the viewport. Read more about CSS columns in the Browser support recipe of this chapter.