How to create a 3-column responsive layout?

Question

I have 3 column layouts. When it opens from the desktop, it looks like this:

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

I want this to be the case when you view it from a browser for mobile / tablets / sizes:

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

My example is below and here is JSFiddle .

 <style> .column-left{ float: left; width: 33%; } .column-right{ float: right; width: 33%; } .column-center{ display: inline-block; width: 33%; } </style> <div class="container"> <div class="column-left">Column left</div> <div class="column-center">Column center</div> <div class="column-right">Column right</div> </div> 

Answer 1

There are many ways to do this. First, you need to make the div appear as columns for large screens, and then use media queries to change them to rows for medium / small screens.

HTML for everyone:

 <div class="container"> <div class="section">1</div> <div class="section">2</div> <div class="section">3</div> </div> 

1. Flexbox:

Jsfiddle

 .container { display: flex; } .section { flex: 1; /*grow*/ border: 1px solid; } @media (max-width: 768px) { /*breakpoint*/ .container { flex-direction: column; } } 

2. Float:

Jsfiddle

 .container:after { /*clear float*/ content: ""; display: table; clear: both; } .section { float: left; width: 33.3333%; border: 1px solid; box-sizing: border-box; } @media (max-width: 768px) { /*breakpoint*/ .section { float: none; width: auto; } } 

3. Built-in unit:

Jsfiddle

 .container { font-size: 0; /*remove white space*/ } .section { font-size: 16px; /*reset font size*/ display: inline-block; vertical-align: top; width: 33.3333%; border: 1px solid; box-sizing: border-box; } @media (max-width: 768px) { /*breakpoint*/ .section { display: block; width: auto; } } 

4. CSS table:

Jsfiddle

 .container { display: table; table-layout: fixed; /*euqal column width*/ width: 100%; } .section { display: table-cell; border: 1px solid; } @media (max-width: 768px) { /*breakpoint*/ .section { display: block; } } 

5. CSS grid:

Jsfiddle

 .container { display: grid; grid-template-columns: 1fr 1fr 1fr; /*fraction*/ } .section { border: 1px solid; } @media (max-width: 768px) { /*breakpoint*/ .container { grid-template-columns: none; } } 

Answer 2

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%; } }