[Newbie Question] Footer/mobile: switching from a 1 row / 4 column desktop view to a 2 rows/2 columns mobile view

Hello everyone, apologize in advance for the following newbie question, I am stuck since days trying to figure out how to solve this.

Basically, in the footer, I have a single row with four columns, each column contains a header and a few links. On mobile, the 4 columns are looking kind of too crowded. I was aiming to have, on mobile, 2 rows and 2 columns to get all the links displayed. So far, I am failing in doing so. As a side note, I am using Laravel.

Please, any suggestions?

What I am basically running is the following,

<div class="large-12 small-12 columns">

  <div class="row">

    <div class="small-3 columns">

The last line of code is repeated 3 times to have 4 columns.

You have to set the needed classes like small-6 medium-3 as class value.

See the documentation for the grid.