こんな感じでしょうか?
動画はこちら
bootstrapを使っているかは計り知れませんが、取り敢えずbootstrap無しで実装しましたが間違ってたらご指摘お願いします。雑な実装で申し訳ないですが。。
istera.html
html
1<head>
2 <link rel="stylesheet" href="istera.css">
3</head>
4<body>
5 <div id="box__red">
6 <div id="box__green"></div>
7 <div id="box__green"></div>
8 <div id="box__green"></div>
9 <div id="box__green"></div>
10 </div>
11
12</body>
istera.css
css
1#box__red{
2 border: red 1px solid;
3 height: 200px;
4 display: flex;
5 margin: 0px 50px;
6}
7
8#box__green{
9 border: green 1px solid;
10 height: 150px;
11 width: 20%;
12 margin: auto;
13}
14
15@media(min-width:800px){
16 #box__red{
17 display: flex;
18 width: 700px;
19 margin: 0px auto;
20 }
21}
box__redにかけているdisplay:flexでその中身のbox__greenを並列に表示させます。
またメディアクエリを用いて横幅が800px以上の時は赤色の箱の横幅を700pxに、つまりwindowの横幅が800pxちょうどの時は箱とwindowの隙間の幅がそれぞれ50pxになりますね。
でwindowの横幅が800px以下の時はmarginで赤い箱とwindowの隙間の幅を50px固定でとるようにしてます。
多分こんな感じかなとは思いますが不明な点、実はそうじゃないねん、bootstrapなどを使ってたとのことでしたらまたおっしゃってください。
また余談ですがサイト模写の質問で、説明が難しいとなればaperture screencastというchromeの拡張を使うのもありかと思われます