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

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

HTML for all:

<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. Inline block:

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