How to create a 3-column responsive layout?

Question

I have a 3 column layout. When access it from desktop, it shows like this:

-------------------------------------------
| columnleft | columncenter | columnright          


        

Answer 1

It will work for you.

.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }

@media screen and (max-width: 960px) {
    .column-left{ float: none; width: 100%; }
    .column-right{ float: none; width: 100%; }
    .column-center{ display: block; width: 100%; }
}