A few layout questions?

Question

css

Hello, please tell me how to do it right in several places when laying out the following layout:
Layout with 1200px and 320px versions:

Top of layouts

1. It seems to me that the main version should be divided into blocks as follows:

Major version division

However, on the phone version here

these

In theory, the elements should go to the popup menu, which will open on the button with a hamburger.

Actually the question is how to correctly remove parts of different blocks in the popup? I can't think of anything other than hiding the original elements and adding copies of them to the popup, but is that correct?

2. How to correctly insert this blue thing from 1-2-3? Stupidly through position: absolute to insert where necessary?

Picture

3. The picture is the same as in the second question. Three blocks have a protruding triangle, the question is also how to make it correctly? Just through ::before/::after throw .svg with a triangle in the right place?

Answer 1

and add their copies to popup, but is it correct?

Why not? If the UX\UI design hasn't thought about the right "folding" of elements, then it's okay if you do display: none\ display: blockon media queries in different parts of the code. For this, hands are not torn off.

What is the right way to insert this blue thing from 1-2-3? Stupidly through position: absoluteinsert where necessary?

As I understand it, this is a slider, full screen - you can absolutely nail it to the left edge body, and center it verticallyleft: 50%, transfrorm: translateY(-50%)

Just through ::before/::after throw .svg with a triangle in the right place?

Yes, since this is an element of decoration - then only through pseudo-elements.