If you want to utilize flexbox, make sure to include the display: flex
property in the parent element's CSS.
Here is a simple example (the CSS rule for .col-xs-12 col-sm-6 col-md-3
is intentionally left empty to demonstrate that a specific CSS rule for the flex child is not necessary unless there is a styling requirement):
.col-md-12{
display: flex;
justify-content: space-between;
}
.col-xs-12 col-sm-6 col-md-3{
}
<div class='col-md-12'>
<div class="col-xs-12 col-sm-6 col-md-3">
<h2 class="title">Computer</h2>
<ul class="links">
<li><a href="#" >Lenovo</a></li><!-- LOOPING -->
<li><a href="#" >Microsoft </a></li>
<li><a href="#" >Fuhlen</a></li>
<li><a href="#" >Longsleeves</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<h2 class="title">Camera</h2>
<ul class="links">
<li><a href="#" >Fuhlen</a></li><!-- LOOPING -->
<li><a href="#" >Lenovo</a></li>
<li><a href="#" >Microsoft </a></li>
<li><a href="#" >Longsleeves</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<h2 class="title">Apple Store</h2>
<ul class="links">
<li><a href="#" >Longsleeves</a></li>
<li><a href="#" >Fuhlen</a></li>
<li><a href="#" >Lenovo</a></li>
<li><a href="#" >Microsoft </a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<h2 class="title">Smart Phone</h2>
<ul class="links">
<li><a href="#">Microsoft </a></li> <!-- LOOPING -->
<li><a href="#">Longsleeves</a></li>
<li><a href="#">"Fuhlen</a></li>
<li><a href="#">Lenovo</a></li>
</ul>
</div>
</div>