Four column layout bootstrap - html

Question

I got give a jsfiddle that asked the following:
Four Column Layout: Using a Bootstrap class, edit these divs from stacked to a 4 column layout
HTML:
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="c"></div>
<div class="a"></div>
<div class="d"></div>
<div class="b"></div>
CSS:
div{
height: 50px;
min-width: 50px;
}
div.a{
background: #00FF00;
}
div.b{
background: #1234FF;
}
div.c{
background: #FbbF00;
}
div.d{
background: #FF3344;
}
For my answer I did the following:
HTML:
<div class="row-fluid">
<div class="span 3">
<div class="a"></div>
<div class="b"></div>
</div>
<div class="span 3">
<div class="c"></div>
<div class="d"></div>
</div>
<div class="span 3">
<div class="c"></div>
<div class="a"></div>
</div>
<div class="span 3">
<div class="d"></div>
<div class="b"></div>
</div>
CSS:
div{
height: 50px;
min-width: 50px;
display: inline-block;
}
div.a{
background: #00FF00;
}
div.b{
background: #1234FF;
}
div.c{
background: #FbbF00;
}
div.d{
background: #FF3344;
}
But I was told I was wrong with no explanation. Does anyone know how to achieve four stacked columns using bootstrap for the above code?

Answer 1

Here you go with the solution https://jsfiddle.net/yczxm9px/1/
.div{
height: 50px;
}
div.a{
background: #00FF00;
}
div.b{
background: #1234FF;
}
div.c{
background: #FbbF00;
}
div.d{
background: #FF3344;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div a">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div b">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div c">
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div d">
</div>
</div>
</div>
All the class are bootstrap class.
xs for Extra Small Screen
sm for Small Screen
md for Medium Screen
lg for Large Screen.