How to leave a responsive site with or without bootstrap?

With or without bootstrap you need to understand about the concept of grid

What is a Grid System?

In case you are a beginner in CSS grid systems, let's start with a quick definition. In basic terms, a grid system is a framework that allows content to be stacked vertically and horizontally in a consistent and easily manageable way. In addition, the code of a grid system is a project-agnostic , giving it a high degree of portability, so that it can be adopted in new projects.

Basic Components

Grid systems include two major components: rows and columns. Lines are used to accommodate the columns. Columns make up the final structure and enclose the actual content. Some grid systems will include containers, which serve to wrap the layout.

read more at: link

Use Media Queries. Media Queries define conditions for CSS to be used in specific scenarios. If these conditions are approved, ie if the device meets all the conditions set out in your Media Query, CSS will apply.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }