How to make a 3 column Responsive Design like in this image?

Question

I have a problem with my layout:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    font-family: lato;
    width: 100%;
  }

  .header {
    background: #111;
    padding: 30;
    position: fixed;
    width: 100%;
  }

  .col1 {
    float: left;
    width: 24%;
    margin-right: 1%;
    background: #9abb28;
  }

  .col2 {
    float: left;
    width: 49%;
    background: #ff7878;
    margin-right: 1%;
  }

  .col3 {
    background: #0d953c;
    float: left;
    width: 25%;
  }

  .fix {
    overflow: hidden;
  }

  .con {
    width: 100%;
  }
  @media screen and (max-width:700px){
    .col2{
      width: 100%;
      float: none;
    }
    .col1{
      width:50%;
    }
    .col3{
      width:50%;
      float: right;
    }
  }
</style>

<body>
  <div class="fix header"></div>
  <div class="fix con">
    <div class="fix col1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nobis perferendis accusantium velit totam soluta corporis, quisquam magnam eligendi non aliquid maiores nemo commodi dicta sequi minima molestias. Animi minus error doloribus facere,
      aspernatur, nam porro. Aperiam praesentium nulla repudiandae, natus labore. Quos deleniti odit fugiat nisi, dignissimos, aspernatur consequuntur, expedita aperiam itaque eveniet explicabo repellendus? Commodi quidem dolorem maxime iste blanditiis
      velit illum dolorum cupiditate nemo, tempora ad tenetur quibusdam necessitatibus ipsum alias asperiores illo culpa! Nobis in, rem nemo magnam facilis aspernatur sit eum ea! Officia, ut, voluptas!</div>
    <div class="fix col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nobis perferendis accusantium velit totam soluta corporis, quisquam magnam eligendi non aliquid maiores nemo commodi dicta sequi minima molestias. Animi minus error doloribus facere,
      aspernatur, nam porro. Aperiam praesentium nulla repudiandae, natus labore. Quos deleniti odit fugiat nisi, dignissimos, aspernatur consequuntur, expedita aperiam itaque eveniet explicabo repellendus? Commodi quidem dolorem maxime iste blanditiis
      velit illum dolorum cupiditate nemo, tempora ad tenetur quibusdam necessitatibus ipsum alias asperiores illo culpa! Nobis in, rem nemo magnam facilis aspernatur sit eum ea! Officia, ut, voluptas!</div>
    <div class="fix col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nobis perferendis accusantium velit totam soluta corporis, quisquam magnam eligendi non aliquid maiores nemo commodi dicta sequi minima molestias. Animi minus error doloribus facere,
      aspernatur, nam porro. Aperiam praesentium nulla repudiandae, natus labore. Quos deleniti odit fugiat nisi, dignissimos, aspernatur consequuntur, expedita aperiam itaque eveniet explicabo repellendus? Commodi quidem dolorem maxime iste blanditiis
      velit illum dolorum cupiditate nemo, tempora ad tenetur quibusdam necessitatibus ipsum alias asperiores illo culpa! Nobis in, rem nemo magnam facilis aspernatur sit eum ea! Officia, ut, voluptas!</div>
  </div>    
 </body>    
</html>

when it comes to make this design, it is not possible for me to align these items for this responsive.
I can make the computer layout, but not the tablet style.

How would I make that design responsive?

In the below picture are the HTML and the CSS...

I would do a media query that changes the order using flex. See [this post](https://stackoverflow.com/questions/37489270/how-to-change-the-flex-order-when-wrapping) — BobtheMagicMoose, Jun 02 '18 at 16:17

score 0 · Answer 1 · answered Jun 02 '18 at 16:31

For the output you want, display:flex is the best solution. Try changing your CSS code to something like this.

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: lato;
  width: 100%;
}

.header {
  background: #111;
  padding: 30;
  position: fixed;
  width: 100%;
}

.col1 {
  float: left;
  width: 24%;
  background: #9abb28;
}

.col2 {
  float: left;
  width: 49%;
  background: #ff7878;
}

.col3 {
  background: #0d953c;
  float: left;
  width: 25%;
}

.fix {
  overflow: hidden;
}

.con {
  width: 100%;
}

.con {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  .col2 {
    order: 1;
    flex-basis: 100%;
  }
  .col1 {
    order: 2;
    flex-basis: 50%;
  }
  .col3 {
    order: 3;
    flex-basis: 50%;
  }
}

How to make a 3 column Responsive Design like in this image?

1 Answers1