What styles to prescribe for page layout?

Question

Adaptive design

There is a view page -
The problem is that when the window is narrowed, elements 3 and 4 run into elements 1, 2, 5.
What to register so that they line up in a vertical row.
I tried:

• offset margin
  
• clear both
  
• transfers
  

then it turns out the original layout becomes crooked or with large gaps.

Answer 1

In order for the right column to be below the left one on a narrow screen, both of them need to cancel the float using media queries.
For example:

@media screen and (max-width: 768px) {
  .column-left,
  .column-right {
    float: none;
  }
}

This entry overrides float for screen resolutions of 768 pixels or less. The columns will line up one above the other.
And in the HTML in the head add the line:
PS So you need?