The CSS:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .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:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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> |