两个div怎么根据浏览器宽度自动排列

Question

<div class="content-box shadow-large bg-white">
                <div class="one-half">
                    <h4 class="ultrabold bottom-10">1/1</h4>
                    <img src="images/pictures/1s.jpg" class="shadow-large">
                    <p>This is half a column.</p>
                </div>
                <div class="one-half last-column">
                    <h4 class="ultrabold bottom-10">1/2</h4>
                    <img src="images/pictures/2s.jpg" class="shadow-large">
                    <p>This is half a column.</p>
                </div>
                
</div>

全宽的时候，这两个div并排了，我把浏览器宽度变小，他们还是跟着变小，浏览器宽度变得非常小的时候，第二个div，也不换行下去。怎么让他们自适应浏览器宽度。因为我要在手机上也可以方便看。以前用bootstrap很方便，这次老板不让用这个东西，说太大影响速度，必须手写，自己组织。晕死。

相关的css是这样的。

.one-half {
    width: 45%;
    float: left;
    margin-right: 10%;}
 .last-column{margin-right: 0 !important}
div{
    display: block;
    position: relative;
}

帮我看一下吧，又干后台，又干前台，命苦啊！

Answer 1

bootstrap原理换行下去是用了 CSS3 @media 查询。

.one-half {
    width: 45%;
    float: left;
    margin-right: 10%;}
.last-column{margin-right: 0 !important}
div{
    display: block;
    position: relative;
}
@media screen and (max-width: 1200px) {
   .one-half {
        width: 90%;
        float: none;
        margin: 0 auto;
    }
    .last-column{
        margin: 0 auto !important;
    }
}

可以找一下相关的博客，自己写个测试html的了解下原理

Answer 2

关键词 媒体查询

Answer 3

弹性布局 + 媒体查询 能够轻松解决