'Responsive page: simplest method to transform a row into two or three [closed]

I recreate my first Google-homepage and I struggle to allow my footer responsive in two or three rows when the page size change. Currently when I change the size of the window's browser I've always one row.

Which is the good way do get something responsive: flexbox, grid, media-queries... ?

I try this:

#footer{
    display: grid;
    grid-template-rows: 50px;
    grid-template-areas: 
        "pub entreprise propos comment neutre infos confidentialite conditions parametres";
    background-color: rgb(242, 242, 242);
    position: fixed;
    bottom: 0;
    width: 100%;
}

#pub{
    grid-area: pub;
    justify-self: center;
    align-self: center;
}


Solution 1:[1]

add css display flex and change it with flex-direction

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 vr ali