栅格系统，
把屏幕分成了十二份

然后是设备监听

bootstrap源码

下边这个div在屏幕宽度>767px的时候占3份，<768px占6份
也就是在电脑宽屏上横屏可以放四个(12/3)，手机上横屏可以放两个(12/6)

<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;  box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>


可以用grid布局不用设备监听做一个栅格系统 
grid-template-columns:repeat(auto-fill,  minmax(400px, 1fr));

完整例子

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style> span { font-size: 2em; } #container { display: grid; grid-template-columns:repeat(auto-fill, minmax(400px, 1fr)); } .item { font-size: 2em; height: 200px; text-align: center; border: 1px solid #e5e4e9; } .item-1 { background-color: #ef342a; } .item-2 { background-color: #f68f26; } .item-3 { background-color: #4ba946; } .item-4 { background-color: #0376c2; } .item-5 { background-color: #c077af; } .item-6 { background-color: #f8d29d; } .item-7 { background-color: #b5a87f; } .item-8 { background-color: #d0e4a9; } .item-9 { background-color: #4dc7ec; } </style>
</head>

<body>
    <div id="container">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
    </div>
</body>

</html>

效果