수평으로 정렬
본문
개념도 없는 상태에서 구글링 해가면서 해보려니 어렵네요.
사진과 같이 세로로 나오는데
이걸 수평으로 첫번째는3개
두번째것은 4개씩 모바일로 나오게 하고싶거든요.
고수님들 도와 주세요.
<!-- ################################################################################################ -->
<div id="introblocks" class="hoc clear">
<ul class="nospace">
<!-- ################################################################################################ -->
<li>
<div><i class="fa fa-3x fa-phone"></i>
<h4 class="heading"><p align="center" style="text-align: center;"><strong>경찰서</strong><br></p></h4>
<a href='tel:112'>112</a>
</div>
</li>
<li>
<div><i class="fa fa-3x fa-phone"></i>
<h4 class="heading"><p align="center" style="text-align: center;"><strong>소방서</strong><br></p></h4>
<a href='tel:119'>119</a>
</div>
</li>
<li>
<div><i class="fa fa-3x fa-phone"></i>
<h4 class="heading"><p align="center" style="text-align: center;"><strong>구급 콜 센터</strong><br></p></h4>
<a href='tel:120'>120</a>
</div>
</li>
<!-- ################################################################################################ -->
</ul>
</div>
<!-- ################################################################################################ -->
위에는 사용한 소스입니다..
<!-- ################################################################################################ -->
<div class="wrapper row3">
<main class="hoc container clear">
<!-- main body -->
<!-- ################################################################################################ -->
<div class="clearfix visible-xs-block">
<h6 class="heading">Mauris nec eros feugiat</h6>
<p>Curabitur ornare turpis id placerat tempor etiam</p>
</div>
<ul class="nospace group">
<div class="col-xs-6 col-sm-4">
<li class="one_quarter first">
<article><a href='tel:1588.5114'><i class="icon btmspace-30 fa fa-dashcube"></i></a>
<h6 class="heading font-x1">삼성화재</h6>
</article>
</li>
</div>
<div class="col-xs-6 col-sm-4">
<li class="one_quarter">
<article><a href="#"><i class="icon btmspace-30 fa fa-leaf"></i></a>
<h6 class="heading font-x1">A lacinia imperdiet</h6>
</article>
</li>
</div>
<div class="col-xs-6 col-sm-4">
<li class="one_quarter">
<article><a href="#"><i class="icon btmspace-30 fa fa-assistive-listening-systems"></i></a>
<h6 class="heading font-x1">Lacinia in et odio</h6>
</article>
</li>
</div>
<div class="col-xs-6 col-sm-4">
<li class="one_quarter">
<article><a href="#"><i class="icon btmspace-30 fa fa-ravelry"></i></a>
<h6 class="heading font-x1">Tincidunt arcu</h6>
</article>
</li>
</div>
<div class="col-xs-6 col-sm-4">
<ul class="nospace group">
<li class="one_quarter first">
<article><a href="#"><i class="icon btmspace-30 fa fa-dashcube"></i></a>
<h6 class="heading font-x1">Finibus quam sit</h6>
</article>
</li>
</div>
<div class="col-xs-6 col-sm-4">
<li class="one_quarter">
<article><a href="#"><i class="icon btmspace-30 fa fa-leaf"></i></a>
<h6 class="heading font-x1">A lacinia imperdiet</h6>
</article>
</li>
</div>
<div class="col-xs-6 col-sm-4">
<li class="one_quarter">
<article><a href="#"><i class="icon btmspace-30 fa fa-assistive-listening-systems"></i></a>
<h6 class="heading font-x1">Lacinia in et odio</h6>
</article>
</li>
</div>
<div class="col-xs-6 col-sm-4">
<li class="one_quarter">
<article><a href="#"><i class="icon btmspace-30 fa fa-ravelry"></i></a>
<h6 class="heading font-x1">Tincidunt arcu</h6>
</article>
</li>
</div>
<div class="col-xs-6 col-sm-4">
<li class="one_quarter first">
<article><a href="#"><i class="icon btmspace-30 fa fa-dashcube"></i></a>
<h6 class="heading font-x1">Finibus quam sit</h6>
</article>
</li>
</div>
<div class="col-xs-6 col-sm-4">
<li class="one_quarter">
<article><a href="#"><i class="icon btmspace-30 fa fa-leaf"></i></a>
<h6 class="heading font-x1">A lacinia imperdiet</h6>
</article>
</li>
</div>
<div class="col-xs-6 col-sm-4">
<li class="one_quarter">
<article><a href="#"><i class="icon btmspace-30 fa fa-assistive-listening-systems"></i></a>
<h6 class="heading font-x1">Lacinia in et odio</h6>
</article>
</li>
</div>
<div class="col-xs-6 col-sm-4">
<li class="one_quarter">
<article><a href="#"><i class="icon btmspace-30 fa fa-ravelry"></i></a>
<h6 class="heading font-x1">Tincidunt arcu</h6>
</article>
</li>
</div>
<div class="col-xs-6 col-sm-4">
<ul class="nospace group">
<li class="one_quarter first">
<article><a href="#"><i class="icon btmspace-30 fa fa-dashcube"></i></a>
<h6 class="heading font-x1">Finibus quam sit</h6>
</article>
</li>
</div>
<div class="col-xs-6 col-sm-4">
<li class="one_quarter">
<article><a href="#"><i class="icon btmspace-30 fa fa-leaf"></i></a>
<h6 class="heading font-x1">A lacinia imperdiet</h6>
</article>
</li>
</div>
<div class="col-xs-6 col-sm-4">
<li class="one_quarter">
<article><a href="#"><i class="icon btmspace-30 fa fa-assistive-listening-systems"></i></a>
<h6 class="heading font-x1">Lacinia in et odio</h6>
</article>
</li>
</div>
<div class="col-xs-6 col-sm-4">
<li class="one_quarter">
<article><a href="#"><i class="icon btmspace-30 fa fa-ravelry"></i></a>
<h6 class="heading font-x1">Tincidunt arcu</h6>
</article>
</li>
</div>
</div>
</ul>
<!-- ################################################################################################ -->
위 소스 입니다.
고수님들 잘 부탁 드립니다.
