Converting Div Row to Column in CSS - html

Question

Alright so this is a simple question, but I have been figuring this out for a while now and I was wondering if theres any simpler to way to convert this div from a column to row, here's the format right now.
Problem
So how do I make it into columns? I got this template online for free so I may be confused a little, I tried out changing the padding size and such but it ruins the whole layout,
.service-list {
padding: 0 0 0 0;
font-size: 14px;
margin-bottom: 40px;
}
.service-list-col1 {
float: left;
width: 60px;
}
.service-list-col3 {
float: left;
width: 60px;
}
.service-list-col4 {
float: left;
width: 60px;
}
.service-list-col1 i {
font-style: normal;
font-size: 38px;
display: block;
color: #222;
font-family: 'FontAwesome';
line-height: 38px;
}
.service-list-col2 {
overflow: hidden;
}
.main-section.alabaster {
background: #fafafa;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="main-section" id="service">
<!--main-section-start-->
<div class="container">
<h2>Services</h2>
<h6>Your investment plus our market experience, endless possibilities.</h6>
<div class="row">
<div class="col-lg-4 col-sm-6 wow fadeInLeft delay-05s">
<div class="service-list">
<div class="service-list-col1"><img src="img/iconn.png" alt="" width="39" height="37" /></div>
<div class="service-list-col2">
<h3>Business development & Project Syndication</h3>
<p>Highest and Best Use Study for Properties<br> Syndication of Projects<br> Project Feasibility Studies<br> Jumpstarting a New Business<br> Brand Planning<br> Business Planning</p>
</div>
</div>
<div class="service-list">
<div class="service-list-col3"><img src="img/iconn.png" alt="" width="39" height="37" /></div>
<div class="service-list-col2">
<h3>investors support and management advisory</h3>
<p>Business Opportunity Scanning<br> Investment Planning & Implementation<br> Negotiations with Local Partners<br> Advisory on Business Entry into Philippines<br> Management to Reposition Existing Property.</p>
</div>
</div>
<div class="service-list">
<div class="service-list-col4"><img src="img/iconn.png" alt="" width="39" height="37" /></div>
<div class="service-list-col2">
<h3>strategies in marketing development, marketing, and sales.</h3>
<p>Strategic Market Research and Planning<br> Positioning & Branding Strategies<br> Market Development Strategies<br> Customized Strategic Marketing & Sales<br> Interventions
</p>
</div>
</div>
</div>
<figure class="col-lg-8 col-sm-6 text-right wow fadeInUp delay-02s"> </figure>
</div>
</div>
</section>
<!--main-section-end-->

Answer 1

In such cases, including HTML markup would help to solve your problem, but let's see.
First of all, you do have rows, the picture given has one column and three rows, so I assume you want to turn those rows into columns.
To do that, make sure the container of those columns (the element that nests all .service-list elements) has width: 100%.
Probably you will have to remove width: 60px from your .service-list-col* elements since that is less than their actual width and it is overflowing, so remove it or set it to something bigger.
If this still doesn't work, try to add display: inline-block to your .service-list elements.
Hope this helps.
UPDATE
Ah, now with the HTML markup it makes more sense. Ignore my css suggestions above, with this structure you can use bootstrap's classes to get your result.
First of all, your service-lists wrapper needs to be able to cover the whole page, for this to happen, you have to define that it takes up 12 columns (default bootstrap css splits the used screen width into 12 columns). To do this, remove these classes col-lg-4 col-sm-6 and add col-xs-12. This will tell bootstrap that this element covers the whole screen width in all screens.
Secondly, you need the service-list divs to cover one third of the screen, so for a good responsiveness I would add to them the classes col-lg-4 col-md-6 col-xs-12. This will make them align 3 per row on a large screen, (12/4 = 3), 2 per row on medium screen (12/6 = 2) and one per row on a small and extra small screen (12/12 = 1).
To sum up, here you can see a working fiddle, I didn't do any changes in your CSS, I just made use of bootstrap classes. Note, to actually see the result, you have to stretch the screen to actually see them line up on the demo.