重新安排窗口上的div元素调整大小

Question

我创建了一个个人网站来练习前端Web开发。我想学习如何在窗口调整大小时重新安排div元素（也使其更适合移动设备）。正如您在我的项目页面中看到的那样，如果我的窗口大小减小到一定的大小，我的项目元素就不能正确对齐而且看起来很邋..我也在窗口调整大小时遇到​​导航栏的问题：

github上的代码： here

项目页面CSS文件： here

我已经研究过媒体查询，但我真的不了解如何实现它们，或者如何实现它们与我的代码相关。建议非常感谢。

添加了项目代码：

.projectBody
    %br
    .row
        .col-md-4
            %a{:href => "javascript:void(0)", :onclick => "document.getElementById('i2share1').style.display='block';document.getElementById('fade').style.display='block'"}
                %img{:src => "http://res.cloudinary.com/fayecheng/image/upload/v1470786049/i2share_eew32c_jzpoi4.png", :id => "i2share"}
    #i2share1.white_content

        %a{:href => "javascript:void(0)", :onclick => "document.getElementById('i2share1').style.display='none';document.getElementById('fade').style.display='none'"}

            .exit
                ×
        = render template: "layouts/_i2share1"

    .col-md-4
        %a{:href => "javascript:void(0)", :onclick => "document.getElementById('lilypad1').style.display='block';document.getElementById('fade').style.display='block'"}
            %img{:src => "http://res.cloudinary.com/fayecheng/image/upload/v1470786235/lilypad1_pm2k4o_pvok8n.png", :id => "lilypad"}
    #lilypad1.white_content
        %a{:href => "javascript:void(0)", :onclick => "document.getElementById('lilypad1').style.display='none';document.getElementById('fade').style.display='none'"}
            .exit
                ×
        = render template: "layouts/_lilypad1"

    .col-md-4
        %a{:href => "javascript:void(0)", :onclick => "document.getElementById('pinkThink1').style.display='block';document.getElementById('fade').style.display='block'"}
            %img{:src => "http://res.cloudinary.com/fayecheng/image/upload/v1470786389/pinkthink_uhp98v_s9af6c.png", :id => "pinkThink"}
    #pinkThink1.white_content
        %a{:href => "javascript:void(0)", :onclick => "document.getElementById('pinkThink1').style.display='none';document.getElementById('fade').style.display='none'"}
            .exit
                ×
        = render template: "layouts/_pinkThink1"
%br
.row
    .col-md-4
        %a{:href => "javascript:void(0)", :onclick => "document.getElementById('platina1').style.display='block';document.getElementById('fade').style.display='block'"}
            %img{:src => "http://res.cloudinary.com/fayecheng/image/upload/v1470786536/platina_ncri1r_dwkrke.png", :id => "platina"}
    #platina1.white_content
        %a{:href => "javascript:void(0)", :onclick => "document.getElementById('platina1').style.display='none';document.getElementById('fade').style.display='none'"}
            .exit
                ×
        = render template: "layouts/_platina1"

    .col-md-4
        %a{:href => "javascript:void(0)", :onclick => "document.getElementById('tech4all1').style.display='block';document.getElementById('fade').style.display='block'"}
            %img{:src => "http://res.cloudinary.com/fayecheng/image/upload/v1470786601/tech4all_pctlqy_oqw2ux.png", :id => "tech4all"}
    #tech4all1.white_content
        %a{:href => "javascript:void(0)", :onclick => "document.getElementById('tech4all1').style.display='none';document.getElementById('fade').style.display='none'"}
            .exit
                ×
        = render template: "layouts/_tech4all1"

    .col-md-4
        %a{:href => "javascript:void(0)", :onclick => "document.getElementById('website1').style.display='block';document.getElementById('fade').style.display='block'"}
            %img{:src => "http://res.cloudinary.com/fayecheng/image/upload/v1470786669/website1_aouvco_xqnijl.png", :id => "website"}
    #website1.white_content
        %a{:href => "javascript:void(0)", :onclick => "document.getElementById('website1').style.display='none';document.getElementById('fade').style.display='none'"}
            .exit
                ×
        = render template: "layouts/_website1"