メディアクエリ（Media Queries）を活用して、float、flexbox、grid、およびrelativeと組み合わせてRWD的な画面の作り方

Float

floatなしで広さを端末の広さにすることで、縦並びにします。」

/* 768px以下の場合のスタイル */
@media screen and (max-width: 768px) {
    .column {
        float: none;
        width: 100%;
    }
}

Flexbox

横並びから縦並びにする設定をします。

/* 768px以下の場合のスタイル */
@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

Grid

該当要素が位置する横と縦（行と列）を再指定します。

/* 768px以下の場合のスタイル */
@media screen and (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

Relative Positioning

相対位置を再指定する形で画面レイアウトを調整します。

/* 768x以下の場合のスタイル */
@media screen and (max-width: 768px) {
    .element {
        position: relative;
        top: 20px;
    }
}

参考サイト