جابجایی نرم المنت ها در طراحی رسپانسیو

دمو

لایه بندی

<div class='layout'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
</div>

.layout {
    width:960px;
    height:600px;
    background:#b34d6f;
    margin:auto;
}
.box {
    width:300px;
    height:200px;
    margin-right:25px;
    background:#4d77b3;
    display:inline-block;
    margin-top:50px;
}
.box:last-child {
    margin-right:0px;
}

اضافه کردن مدیا کوئری

@media screen and (max-width:960px) {
    .layout {
        width: 870px;
    }
    .box {
        width:270px;
    }
}
@media screen and (max-width: 660px) {
    .layout {
        width:570px;
    }
    .box {
        width:170px;
    }
    .box:last-child {
        opacity:0;
    }
}

انیمیشن را اضافه کنید

*{
    -webkit-transition:all 1s ease;
         -moz-transition:all 1s ease;
               -o-transition:all 1s ease;
                     transition:all 1s ease;
}

نتیجه گیری