Multi column Lists

The CSS:

.col-list-wrap {
	margin-bottom: 20px;
}
.col-list-wrap ul {
	margin-bottom: 0;
	float: left;
	width: 100%;
}
.col-list-wrap:before,/* adding clearfix */
.col-list-wrap:after {
	content: " ";
	display: table;
}
.col-list-wrap:after {
	clear: both;
}
@media(min-width:768px){
	.two.col-list-wrap ul, .col-list-wrap ul {
		width:50%;
	}
	.three.col-list-wrap ul {
		width:33%;
	}
	.four.col-list-wrap ul {
		width:25%;
	}
}

.col-list-wrap {

margin-bottom: 20px;

}

.col-list-wrap ul {

margin-bottom: 0;

float: left;

width: 100%;

}

.col-list-wrap:before,/* adding clearfix */

.col-list-wrap:after {

content: " ";

display: table;

}

.col-list-wrap:after {

clear: both;

}

@media(min-width:768px){

.two.col-list-wrap ul, .col-list-wrap ul {

width:50%;

}

.three.col-list-wrap ul {

width:33%;

}

.four.col-list-wrap ul {

width:25%;

}

The HTML:

<div class="two col-list-wrap"><!--or three or four-->
	<ul>
		<li>Dental exams and procedures</li>
		<li>Job coaching, resume building assistance, etc.</li>
		<li>Housing programs</li>
		<li>Senior resources</li>
	</ul>
	<ul>
		<li>Domestic violence support</li>
		<li>Social Security Disability Income or Social Security Income</li>
		<li>Free financial counseling and budgeting classes</li>
		<li>One Stop Re-Entry Center: support services for incarcerated individuals </li>
	</ul>
</div>

<ul>

<li>Dental exams and procedures</li>

<li>Job coaching, resume building assistance, etc.</li>

<li>Housing programs</li>

<li>Senior resources</li>

</ul>

<ul>

<li>Domestic violence support</li>

<li>Social Security Disability Income or Social Security Income</li>

<li>Free financial counseling and budgeting classes</li>

<li>One Stop Re-Entry Center: support services for incarcerated individuals </li>

</ul>

</div>