Hello Reader's,

If you have develop a non responsive website and you want  to convert it into a responsive design compatible for mobile and tablets then in this blog you can learn how to do this.
To make website layout responsive you need to make changes in your css file. Making a website responsive is an idea to run different different css based on different devices. So lets start making a responsive layout for mobile first.
 

Let's take an example of a html page as below:-

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

Now we will make it responsive. Mobiles devices have the screen size of screen size of max 800 px. So will make the cases for devices with their screen sizes and its CSS will go like this:-

@media only screen and (max-width: 800px) {
   .row {
      width: 320px;
      line-height: 24px;
      text-align: left;
    }
  }

In the above CSS this will optimize the design for all mobile devices which have screen size less than 800px. Any device fall under this category will adapt this new css where width will be 320px. Hence it will fit in its body with looks like responsive. 
Now we will make responsive design for small mobile devices so their css will like this:-

@media only screen and (max-width: 350px) {
   .row {
      width: 300px;
      line-height: 15px;
      text-align: left;
    }
  }

In the above css code width is assign to 300px  for every device having width 350px. Similarly for every device you can write its own css which will make its own layout.