Depending on the design process you started with, but in general, you would start with the desktop design, and lower down to mobile. If you started your design with a mobile-first process, you'll have to start on a mobile and then upgrade to the desktop. 

So, the initial CSS is for desktop, so what we have to consider now is what conditions we want to apply to the CSS. 

The devices we want to target are as follows:

• Desktop (by default)
• Tablet (viewport size fewer than or equal to 1,024px)
• Large mobile  (viewport size fewer than or equal to 768px)
• Small mobile  (viewport size fewer than or equal to 400px)

This is an example of how you can separate the different breakpoints. You can definitely change it according to your needs. 

So, this is how it looks in CSS:

/* Tablet Styles */
@media only screen and (max-width: 1024px) {
  
} 

/* Large Mobile Styles */
@media only screen and (max-width: 768px) {
  
} 

/* Small Mobile Styles */
@media only screen and (max-width: 400px) {
  
} 

Now that we have our breakpoint ready, let's start making our website responsive.