рд╡рд╛рдиреНрдпрд╛ рджрд╛рджреА рдпрд╛ рдЧрддрд┐рд╢реАрд▓ рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдЕрдиреБрдХреВрд▓реА рдХреЗ рдкрд╛рд╕ рдЬрд╛рддреА рд╣реИ

рдЕрдиреБрдХреВрд▓реА рдкрд░ рдХрд╛рдо рдХрд░рддреЗ рд╕рдордп, рд╣рдореЗрдВ рдЕрдм рдФрд░ рдлрд┐рд░ рд╡рд╕реНрддреБрдУрдВ рдХреА рдЙрдкрд╕реНрдерд┐рддрд┐ рдХреЛ рдмрджрд▓рдирд╛ рд╣реЛрдЧрд╛ред рдЖрдорддреМрд░ рдкрд░ рд╣рдорд╛рд░реЗ рд▓рд┐рдП рдХрдИ рдореАрдбрд┐рдпрд╛ рдХреНрд╡реЗрд╢реНрдЪрди рд░рдЬрд┐рд╕реНрдЯрд░ рдХрд░рдирд╛ рдХрд╛рдлреА рд╣реЛрддрд╛ рд╣реИ рдФрд░ рд╣рдо рдЗрд╕реЗ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдХреБрдЫ рдорд╛рдорд▓реЛрдВ рдореЗрдВ, рд╣рдореЗрдВ рддрддреНрд╡реЛрдВ рдХреЗ рдХреНрд░рдо рдХреЛ рдмрджрд▓рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рдФрд░ рдпрд╣рд╛рдВ, рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдлреНрд▓реЗрдХреНрд╕рдмреЙрдХреНрд╕ рдпрд╛ рдЧреНрд░рд┐рдб рддрдХрдиреАрдХ рд╕реЗ рдСрд░реНрдбрд░ рд╕рдВрдкрддреНрддрд┐ рдмрдЪрд╛рд╡ рдореЗрдВ рдЖрддреА рд╣реИред рд▓реЗрдХрд┐рди рдХрдИ рдмрд╛рд░ рдРрд╕рд╛ рд╣реЛрддрд╛ рд╣реИ рдЬрдм рдпрд╣ рд╣рдорд╛рд░реА рдорджрдж рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред

рдЧрддрд┐рд╢реАрд▓ рдЕрдиреБрдХреВрд▓реА рдХрд╛ рд╡рд┐рдЪрд╛рд░ рдПрдХ рд▓реЗрдЖрдЙрдЯ рдбрд┐рдЬрд╛рдЗрдирд░ рдХреЗ рдЬреАрд╡рди рдХреЛ рд╕рд░рд▓ рдмрдирд╛рдиреЗ рдФрд░ рдЬрдЯрд┐рд▓ рд▓реЗрдЖрдЙрдЯ рддрддреНрд╡реЛрдВ рдХреЛ рдЬрд▓реНрджреА рд╕реЗ рдЕрдиреБрдХреВрд▓рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдбрд┐рдЬрд╝рд╛рдЗрди рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред


рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдЗрд╕ рдорд╛рдорд▓реЗ рдХреЛ рджреЗрдЦреЗрдВред рдпрд╣рд╛рдВ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рд╕рдВрд░рдЪрдирд╛ рд╣реИ: рд╢реАрд░реНрд╖рдХ рдФрд░ рдХреБрдЫ рдкрд╛рдаред



рд▓реЗрдХрд┐рди рдПрдХ рдирд┐рд╢реНрдЪрд┐рдд рдЕрдиреБрдорддрд┐ рдХреЗ рд╕рд╛рде, рдбрд┐рдЬрд╛рдЗрдирд░ рдиреЗ рд╕рдВрдХреЗрдд рджрд┐рдпрд╛ рдХрд┐ рд╢реАрд░реНрд╖рдХ рдХреЗ рддрд╣рдд рдЖрдиреЗ рд╡рд╛рд▓рд╛ рдкрд╛рда рдЕрдм рд╕рдВрд░рдЪрдирд╛ рдореЗрдВ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдЕрд▓рдЧ рдЬрдЧрд╣ рдкрд░ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред



рдЖрдорддреМрд░ рдкрд░, рд▓реЗрдЖрдЙрдЯ рдбрд┐рдЬрд╛рдЗрдирд░реЛрдВ рдиреЗ рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХреЛ рджреЛ рддрд░реАрдХреЛрдВ рдореЗрдВ рд╕реЗ рдПрдХ рдореЗрдВ рд╣рд▓ рдХрд┐рдпрд╛ред рдореИрдВ рдЬрд▓реНрджреА рд╕реЗ рдЖрдкрдХреЛ рдЙрдирдХреА рдпрд╛рдж рджрд┐рд▓рд╛рдКрдВрдЧрд╛ред

рдореИрдВ рдЗрд╕реЗ рдПрдХ рдЬреАрд╡рди рдХреА рд╕реНрдерд┐рддрд┐ рдХреЗ рдЙрджрд╛рд╣рд░рдг рдХреЗ рд░реВрдк рдореЗрдВ рджрд┐рдЦрд╛рдКрдВрдЧрд╛ рдЬрдм рд╢рд╣рд░ рдХрд╛ рд▓рдбрд╝рдХрд╛ рд╡рд╛рдиреНрдпрд╛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЧрд░реНрдорд┐рдпреЛрдВ рдХреЗ рд▓рд┐рдП рдЕрдкрдиреА рджрд╛рджреА рдХреЗ рдкрд╛рд╕ рдЖрдирд╛ рдЪрд╛рд╣рддрд╛ рдерд╛ред рд▓реЗрдХрд┐рди рдЗрд╕рд▓рд┐рдП рдирд╣реАрдВ рдХрд┐ рдЙрд╕рдиреЗ рдЕрдкрдиреА рджрд╛рджреА рдХреЛ рдпрд╛рдж рдХрд┐рдпрд╛, рдмрд▓реНрдХрд┐ рдЗрд╕рд▓рд┐рдП рдХрд┐ рд╡рд╣ рд▓рдбрд╝рдХреА рдУрд▓реЗрдЖ рдХреЗ рд╕рд╛рде рдирджреА рдкрд░ рдЬрд╛рдирд╛ рдЪрд╛рд╣рддреА рдереАред рдФрд░ рд╡рд╣ рдРрд╕рд╛ 992px рд╕реЗ рдиреАрдЪреЗ рдХреЗ рд╕рдВрдХрд▓реНрдк рдкрд░ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рдерд╛ред



рд╣рдо рд╡рд╛рдгреА рдХреА рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рдорд╛рдзрд╛рди рдХреИрд╕реЗ рдХрд░реЗрдВрдЧреЗ?
рд╣рдо рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ: рдЗрд╕ рдЕрдиреБрдорддрд┐ рдкрд░ рд╢рд╣рд░ рдореЗрдВ рд╡рд╛рдиреНрдпрд╛ рдХреЛ рдЫрд┐рдкрд╛рдПрдВ, рдФрд░ рдУрдирд┐рдпрд╛ рдХреЗ рд╕рд╛рде рд╡рд╛рдиреНрдпрд╛ рдХреЛ рдирджреА рдкрд░ рджрд┐рдЦрд╛рдПрдВред рд▓реЗрдХрд┐рди рдЗрд╕рдХреЗ рд▓рд┐рдП рд╣рдореЗрдВ рд╡рд╛рдгреА рдХрд╛ рдХреНрд▓реЛрди рдмрдирд╛рдиреЗ рдХреА рдЬрд░реВрд░рдд рд╣реИред
рдпрд╣рд╛рдБ рд╢рд╣рд░ (рдореВрд▓) рд╡рд╛рдиреНрдпрд╛ рд╣реИред рд▓реЗрдХрд┐рди рд╡рд╛рдиреНрдпрд╛, рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ, рдУрд▓рд╛ рдХреЗ рд╕рд╛рде рдирджреА рдкрд░ред



рд▓реЗрдХрд┐рди рд╢реБрд░реВ рдореЗрдВ рдпрд╣ рдирджреА рд╡рд╛рдиреНрдпрд╛ рд╕реАрдПрд╕рдПрд╕ рдореЗрдВ рдЫрд┐рдкреА рд╣реБрдИ рд╣реИред рд╣рдо рдЕрдкрдиреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдХреЗ рдорд╛рдкрджрдВрдбреЛрдВ рдХреЗ рд╕рд╛рде рдПрдХ рдореАрдбрд┐рдпрд╛ рдХреНрд╡реЗрд░реА рд▓рд┐рдЦрддреЗ рд╣реИрдВ, рдЬрд┐рд╕рдореЗрдВ рд╣рдо рдирдпрд╛ рд╡рд╛рдиреНрдпрд╛ рджрд┐рдЦрд╛рддреЗ рд╣реИрдВ рдФрд░ рдкреБрд░рд╛рдиреЗ рд╡рд╛рдиреНрдпрд╛ (рд╢рд╣рд░) рдХреЛ рдЫрд┐рдкрд╛рддреЗ рд╣реИрдВред



рд╕рдм рдХреБрдЫ рд╣рдорд╛рд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ - рд╣рдореЗрдВ рдЬрд┐рд╕ рдЕрдиреБрдорддрд┐ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИ, рд╡рд╛рдиреНрдпрд╛ рдЦреБрдж рдХреЛ рдУрд▓рд╛ рдХреЗ рддрд╣рдд рдкрд╛рддреА рд╣реИред



рддрджрдиреБрд╕рд╛рд░, рдЬрдм рд╕рдВрдХрд▓реНрдк 992px рд╕реЗ рдЕрдзрд┐рдХ рд╣реИ, рддреЛ рд╡рд╛рдиреНрдпрд╛ рддреБрд░рдВрдд рд╢рд╣рд░ рд▓реМрдЯ рдЖрддреА рд╣реИред



рдФрд░ рд╕рдм рдХреБрдЫ рдареАрдХ рд╣реЛрдиреЗ рд▓рдЧрддрд╛ рд╣реИ, рд╡рд╛рдиреНрдпрд╛ рдХреЛ рдУрд▓рд╛ рдХреЗ рд╕рд╛рде рдЬрдм рдЬрд░реВрд░рдд рд╣реЛрддреА рд╣реИред рдЖрдк рдлреИрд▓рд╛ рд╕рдХрддреЗ рд╣реИрдВ ...

рд▓реЗрдХрд┐рди рдЗрддрдирд╛ рд╕рд░рд▓ рдирд╣реАрдВ рд╣реИред рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ, рдХреБрдЫ рдЧреНрд░рд╛рд╣рдХ рдбреБрдкреНрд▓рд┐рдХреЗрдЯ рд╕рд╛рдордЧреНрд░реА рдХрд╛ рд╡рд┐рд░реЛрдз рдХрд░рддреЗ рд╣реИрдВред рдпрд╣ рдПрд╕рдИрдУ рдХреЗ рд╕рд╛рде рдХреБрдЫ рд╕рдорд╕реНрдпрд╛рдУрдВ рдХреЗ рдХрд╛рд░рдг рд╣реЛрддрд╛ рд╣реИ, рдФрд░, рд╕рд┐рджреНрдзрд╛рдВрдд рд░реВрдк рдореЗрдВ, рдЕрдирд╛рд╡рд╢реНрдпрдХ рдмреНрд▓реЙрдХреЛрдВ рдХрд╛ рдирд┐рд░реНрдорд╛рдгред

рдЕрдм рд╣рдо рднрд╛рдЧреНрдпрд╢рд╛рд▓реА рд╣реИрдВ, рд╣рдорд╛рд░реА рд╕реНрдерд┐рддрд┐ рдореЗрдВ рд╡рд╛рдиреНрдпрд╛ рдПрдХ рддрд░рд╣ рдХреА рдЫреЛрдЯреА рд╣реИ, рдФрд░ рд╡рд╛рдиреНрдпрд╛ рдмрд╣реБрдд рдмрдбрд╝реЗ, рдмрдбрд╝реЗ рдкреИрдорд╛рдиреЗ рдкрд░, рд▓реЛрдЧреЛрдВ рдХреЛ рдкрдВрдк рдХрд░рддреА рд╣реИ, рдЬрд┐рд╕реЗ рдХреНрд░рдорд╢рдГ рдХреЛрдб рдХреА рдмрд╣реБрдд рд╕рд╛рд░реА рд▓рд╛рдЗрдиреЛрдВ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИред рдФрд░ рдЗрд╕ рд╕реНрдерд┐рддрд┐ рдореЗрдВ, рдЧреНрд░рд╛рд╣рдХреЛрдВ рд╕рд╣рд┐рдд, рд╡реЗ рдЖрдкрдХреЛ рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдбреЛрдо рдСрдмреНрдЬреЗрдХреНрдЯ рдХреЛ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд╣рддреЗ рд╣реИрдВред

рдпрд╣ рд▓рдЧрднрдЧ рдЗрд╕ рдкреНрд░рдХрд╛рд░ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред рд╢реБрд░реБрдЖрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рдореБрдЭреЗ рд╡рд╛рдиреНрдпрд╛ рдХреЛ рд╣рдЯрд╛рдирд╛ рд╣реЛрдЧрд╛, рдЬреЛ рдПрдЪрдЯреАрдПрдордПрд▓ рдореЗрдВ рдХреНрд▓реЛрди рд╣реИ, рдФрд░ рд╡рд╛рдиреНрдпрд╛ рдХреЛ рдореВрд▓ рдЫреЛрдбрд╝ рджреЗрдЧрд╛ред CSS рдореЗрдВ, рдЙрди рд╕рднреА рд▓рд╛рдЗрдиреЛрдВ рдкрд░ рдЯрд┐рдкреНрдкрдгреА рдХрд░реЗрдВ рдЬреЛ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдореВрд▓ рд░реВрдк рд╕реЗ рджреВрд╕рд░реЗ рд░реИрдкрд┐рдВрдЧ рд╡рд┐рдХрд▓реНрдк рдХреЗ рд▓рд┐рдП рдереАрдВред рдФрд░ рдпрд╣рд╛рдБ рдЗрд╕ рддрд░рд╣ рдХреЗ рдПрдХ рд╕рд░рд▓ рдЬреЗрдПрд╕ рдХреЛрдб рдЬреЛрдбрд╝реЗрдВред

// 
const parent_original = document.querySelector('.content__blocks_city');
const parent = document.querySelector('.content__column_river');
const item = document.querySelector('.content__block_item');

//   
window.addEventListener('resize', move);

//
function move(){
	const viewport_width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
	if (viewport_width <= 992) {
		if (!item.classList.contains('done')) {
			parent.insertBefore(item, parent.children[2]);
			item.classList.add('done');
		}
	} else {
		if (item.classList.contains('done')) {
			parent_original.insertBefore(item, parent_original.children[2]);
			item.classList.remove('done');
		}
	}
}

// 
move();

рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ, рд╣рдо рдЙрди рдЪрд░реЛрдВ рдХреЛ рдШреЛрд╖рд┐рдд рдХрд░рддреЗ рд╣реИрдВ рдЬрд╣рд╛рдВ рд╣рдо рд╢рд╣рд░, рдирджреА рдФрд░ рдореВрд▓ рд╡рд╛рдгреА рдХреЗ рд▓рд┐рдП "рдбрд╛рдпрд▓" рдХрд░рддреЗ рд╣реИрдВред рдЕрдЧрд▓рд╛, рд╣рдо рдЙрд╕ рдкрд▓ рдХреЛ рдкрдХрдбрд╝рдиреЗ рдХреЗ рд▓рд┐рдП рд╕реНрдХреНрд░реАрди рдХреА рдЪреМрдбрд╝рд╛рдИ рдХреЛ "рд╕реБрдирдирд╛" рд╢реБрд░реВ рдХрд░рддреЗ рд╣реИрдВ рдЬрдм рд╣рдореЗрдВ рд╡рд╛рдиреНрдпрд╛ рдХреЛ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИред рдЪреМрдбрд╝рд╛рдИ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж рдФрд░ рдЙрд╕ рд╕реНрдерд┐рддрд┐ рдХреЛ рд╕реЗрдЯ рдХрд░реЗрдВ рдЬрд┐рд╕рдореЗрдВ рд╣рдо рдЬрд╛рдБрдЪрддреЗ рд╣реИрдВ рдХрд┐ рдЪреМрдбрд╝рд╛рдИ 992px рд╕реЗ рдХрдо рдпрд╛ рдмрд░рд╛рдмрд░ рд╣реИред рд╡рд╛рдиреНрдпрд╛ рдХреЛ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рддреЗ рд╕рдордп, рд╣рдо рдЙрд╕реЗ рдПрдХ рдХрдХреНрд╖рд╛ рдкреНрд░рджрд╛рди рдХрд░рддреЗ рд╣реИрдВ, рдЗрд╕рд▓рд┐рдП рд╣рдо рдПрдХ рд╡рд░реНрдЧ рдХреА рдЙрдкрд╕реНрдерд┐рддрд┐ рдХреА рдЬрд╛рдВрдЪ рдХрд░рддреЗ рд╣реИрдВ рддрд╛рдХрд┐ рдпрд╣ рд╣рд░ рд╕рдордп рди рд╣реЛ (рд╡рд╛рдиреНрдпрд╛ рдПрдХ рдмрд╛рд░ рдЪрд▓реЗ рдЧрдП рдФрд░ рдпрд╣ рдмрд╛рдд рд╣реИ, рдЖрдкрдХреЛ рдЗрд╕реЗ рд▓рдЧрд╛рддрд╛рд░ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реИ)ред рдФрд░ рд╣рдо рд╕реНрд╡рдпрдВ рдХреЛ рдорд╛рддрд╛-рдкрд┐рддрд╛ (рдирджреА рдХреЗ рдЕрдВрджрд░) рдореЗрдВ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рддреЗ рд╣реИрдВ, рдпрд╣рд╛рдВ рд╣рдо DOM рдкреЗрдбрд╝ рдореЗрдВ рд╕реНрдерд┐рддрд┐ рдХреЛ рдЗрдВрдЧрд┐рдд рдХрд░рддреЗ рд╣реИрдВ рдЬрд╣рд╛рдВ рд╣рдореЗрдВ рд╡рд╛рдиреНрдпрд╛ (рдУрд▓рд╛ рдХреЗ рдКрдкрд░, рдУрд▓рд╛ рдХреЗ рдиреАрдЪреЗ) рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рдФрд░ рдЬрдм рд╣рдорд╛рд░реЗ рдкрд╛рд╕ 992px рд╕реЗ рдЕрдзрд┐рдХ рдХрд╛ рд░рд┐рдЬрд╝реЙрд▓реНрдпреВрд╢рди рд╣реЛ, рддреЛ рд╣рдореЗрдВ рд╡рд╛рдиреНрдпрд╛ рдХреЛ рдЙрд╕ рд╕реНрдерд╛рди рдкрд░ рд▓реМрдЯрдирд╛ рд╣реЛрдЧрд╛ред

рд╣рдо рдХреЛрд╢рд┐рд╢ рдХрд░рддреЗ рд╣реИрдВ рдФрд░ рджреЗрдЦрддреЗ рд╣реИрдВ рдХрд┐ рд╣рдорд╛рд░рд╛ рд╡рд╛рдиреНрдпрд╛ рдлрд┐рд░ рд╕реЗ рдУрд▓реЗрд░рд╛ рдореЗрдВ рдЪрд▓рд╛ рдЧрдпрд╛ред

рдФрд░ рд╕рдм рдХреБрдЫ рдареАрдХ рд╣реИ: рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдХреЛрдИ рдбреБрдкреНрд▓рд┐рдХреЗрдЯ рд╕рд╛рдордЧреНрд░реА рдирд╣реАрдВ рд╣реИ, рд╕рдм рдХреБрдЫ рдЕрдЪреНрдЫреА рддрд░рд╣ рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рдЧреНрд░рд╛рд╣рдХ рд╕рдВрддреБрд╖реНрдЯ рд╣реИ, рд╣рд░ рдХреЛрдИ рдЦреБрд╢ рд╣реИред рд▓реЗрдХрд┐рди рдЗрд╕ рдкрджреНрдзрддрд┐ рдореЗрдВ рдХрдИ рд╕рдорд╕реНрдпрд╛рдПрдВ рд╣реИрдВ рдЬреЛ рд╕реНрд╡рдпрдВ js-code рдХреЗ рд▓реЗрдЦрди рд╕реЗ рдЬреБрдбрд╝реА рд╣реИрдВред
рд╣рдо рд╕рдордЭрддреЗ рд╣реИрдВ рдХрд┐ рдХрд┐рд╕реА рдПрдХ рдорд╛рдорд▓реЗ рдХреЗ рд▓рд┐рдП рдпрд╣ рд╕рд╛рдорд╛рдиреНрдп рд╣реИ - рд╣рдордиреЗ рдЕрдЪреНрдЫрд╛ рд▓рд┐рдЦрд╛ рд╣реИред рд▓реЗрдХрд┐рди рдореБрдЭреЗ рдЗрд╕ рдкреНрд░рдХреНрд░рд┐рдпрд╛ рдХреЛ рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рдХрд░рдиреЗ рдХрд╛ рд╡рд┐рдЪрд╛рд░ рдЖрдпрд╛ред рдорд╛рди рд▓реАрдЬрд┐рдП рдХрд┐ рдореБрдЭреЗ рдкреГрд╖реНрда рдкрд░ 5-6 рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдЕрд▓рдЧ рддрддреНрд╡ рдлреЗрдВрдХрдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рдЗрд╕ рдХрд╛рд░реНрдп рдХреЗ рд▓рд┐рдП, рдЗрд╕ рд╡рд┐рдзрд┐ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдПрдХ js рдХреЛрдб рд▓рд┐рдЦрдирд╛ рдХрд╛рдлреА рд╢реНрд░рдорд╕рд╛рдзреНрдп рдФрд░ рд╕рдордп рд▓реЗрдиреЗ рд╡рд╛рд▓рд╛ рд╣реИред рдФрд░ рджреВрд╕рд░рд╛ рдмрд┐рдВрджреБ, рдЬреЛ, рд╕реНрд╡рд╛рднрд╛рд╡рд┐рдХ рд░реВрдк рд╕реЗ, рдЖрдк рдореЗрдВ рд╕реЗ рдмрд╣реБрдд рд╕реЗ рддрдирд╛рд╡рдкреВрд░реНрдг рд╣реИ, рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреЗ рдкреАрд╕реА рдкрд░ рд▓реЛрдб рд╣реИ, рдХреНрдпреЛрдВрдХрд┐ рдпрд╣рд╛рдВ рд╣рдо рд╕реНрдХреНрд░реАрди рдХреА рдЪреМрдбрд╝рд╛рдИ рдХреЗ рд▓рд┐рдП рд▓рдЧрд╛рддрд╛рд░ "рд╕реБрди" рд░рд╣реЗ рд╣реИрдВред рдореИрдВ рдЗрд╕ рдкрд▓ рдХреЛ рднреА рдЕрдиреБрдХреВрд▓рд┐рдд рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рдерд╛ред рдпрд╣ рдЗрд╕ рдХреЛрдб рдореЗрдВ рднреА рдЕрдиреБрдХреВрд▓рд┐рдд рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдЬрдм рд╕реЗ рдореИрдВрдиреЗ рдПрдХ рд╕реНрд╡рдЪрд╛рд▓рди рдЙрдкрдХрд░рдг рд▓рд┐рдЦрд╛ рдерд╛ рдЬрд┐рд╕реЗ рдореИрдВрдиреЗ "рдбрд╛рдпрдиреЗрдорд┐рдХ рдЕрдиреБрдХреВрд▓реА" рдХрд╣рд╛ рдерд╛ , рдореИрдВрдиреЗ рд╡рд╣рд╛рдВ рдЕрдиреБрдХреВрд▓рд┐рдд рдХрд┐рдпрд╛ред

рдЕрдм рдореИрдВ рдЖрдкрдХреЛ рджрд┐рдЦрд╛рддрд╛ рд╣реВрдВ рдХрд┐ рдпрд╣ рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред

рдЕрдкрдиреЗ рдбрд╛рдпрдирд╛рдорд┐рдХ рдПрдбреИрдкреНрдЯрд┐рд╡ рд╕реЗ рдХрдиреЗрдХреНрдЯ рд╣реЛрдиреЗ рдХреЗ рдмрд╛рдж, рдореБрдЭреЗ рдХреЗрд╡рд▓ HTML рдлрд╝рд╛рдЗрд▓ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ рдФрд░ рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рддрдХ рдкрд╣реБрдВрдЪрдиреЗ рдХреА рдХреЛрдИ рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реИред рдРрд╕рд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рдореБрдЭреЗ рдбреЗрдЯрд╛-рджрд╛ рд╡рд┐рд╢реЗрд╖рддрд╛ рд▓рд┐рдЦрдиреЗ рдХреА рдЬрд╝рд░реВрд░рдд рд╣реИ (рдбрд╛рдп рдбрд╛рдпрдиреЗрдорд┐рдХ рдЕрдиреБрдХреВрд▓реА рдХреЗ рд▓рд┐рдП рдЫреЛрдЯрд╛ рд╣реИ) рдФрд░ рдХреЙрдорд╛ рд╕реЗ рдЕрд▓рдЧ рдХрд┐рдП рдЧрдП рдЙрджреНрдзрд░рдг рдЪрд┐рд╣реНрдиреЛрдВ рдореЗрдВ рддреАрди рдкреИрд░рд╛рдореАрдЯрд░ рдирд┐рд░реНрджрд┐рд╖реНрдЯ рдХрд░реЗрдВред
рдкрд╣рд▓рд╛ рдкреИрд░рд╛рдореАрдЯрд░ рдЬрд╣рд╛рдВ рд╣реИред рдореИрдВ рдЙрд╕ рд╡рд╕реНрддреБ рдХрд╛ рдПрдХ рдЕрдиреЛрдЦрд╛ рд╡рд░реНрдЧ рд▓реЗрддрд╛ рд╣реВрдВ рдЬрд╣рд╛рдВ рдореИрдВ рд╡рд╛рдиреНрдпрд╛ рдХреЛ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВред
рджреВрд╕рд░рд╛ рдкреИрд░рд╛рдореАрдЯрд░ рд╡рд╣ рд╣реИ рдЬреЛ (рдПрдХ рдкрдВрдХреНрддрд┐ рдореЗрдВ) рд╣реИред рдореЗрд░реА рд╡рд╕реНрддреБ рдореЗрдВ рджреЛ рддрддреНрд╡ рд╣реИрдВ: рд╢реВрдиреНрдп рдФрд░ рдкрд╣рд▓рд╛ (рд╣рдо рдЬрд╛рдирддреЗ рд╣реИрдВ рдХрд┐ рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдореЗрдВ рд╕рдм рдХреБрдЫ рдЦрд░реЛрдВрдЪ рд╕реЗ рд╢реБрд░реВ рд╣реЛрддрд╛ рд╣реИ)ред рдореБрдЭреЗ "1" рдСрдмреНрдЬреЗрдХреНрдЯ рдХреЗ рдмрд╛рдж рд╡рд╛рдиреНрдпрд╛ рдХреЛ рд╕рдореНрдорд┐рд▓рд┐рдд рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдореИрдВ "2" рдкреИрд░рд╛рдореАрдЯрд░ рд▓рд┐рдЦ рд░рд╣рд╛ рд╣реВрдВред

рддреАрд╕рд░рд╛ рдкреИрд░рд╛рдореАрдЯрд░ рд╣реИ рдЬрдм рддреАрд╕рд░реЗ рдкреИрд░рд╛рдореАрдЯрд░ рдореЗрдВ, рдореИрдВ "992" рд▓рд┐рдЦрддрд╛ рд╣реВрдВ, рдпрд╣ рд╕рдВрдХрд▓реНрдк рд╣реИ рдЬрд┐рд╕рдХреЗ рдиреАрдЪреЗ рд╡рд╛рдиреНрдпрд╛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдУрд▓реНрдЧрд╛ рдХреЛ рдкреНрд░рд╛рдкреНрдд рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реИред

рджреВрд╕рд░рд╛ рдФрд░ рддреАрд╕рд░рд╛ рдкреИрд░рд╛рдореАрдЯрд░ рд╡реИрдХрд▓реНрдкрд┐рдХ рд╣реИрдВред рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд░реВрдк рд╕реЗ, рдСрдмреНрдЬреЗрдХреНрдЯ рдХреЛ 768px рд╕реЗ рдиреАрдЪреЗ рдХреЗ рд░рд┐рдЬрд╝реЙрд▓реНрдпреВрд╢рди рдкрд░ рдмреНрд▓реЙрдХ рдХреЗ рдЕрдВрдд рдореЗрдВ рд▓реЗ рдЬрд╛рдпрд╛ рдЬрд╛рдПрдЧрд╛ред



рд╣рдо рдЬрд╛рдБрдЪред рд╕рдм рдХреБрдЫ рдкрд┐рдЫрд▓реЗ рд╕рдВрд╕реНрдХрд░рдгреЛрдВ рдХреА рддрд░рд╣ рд╣реА рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдмрд┐рдирд╛ рд╕рд╛рдордЧреНрд░реА рдХреЗ рджреЛрд╣рд░рд╛рд╡ рдФрд░ рд╕рдм рдХреБрдЫ рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рд╣реИред

рд╕реБрд╡рд┐рдзрд╛рдУрдВ рдкрд░ рд╡рд┐рдЪрд╛рд░ рдХрд░реЗрдВред

рдЕрдм, рд╡рд╛рдиреНрдпрд╛ рдХреЛ рдУрд▓реЗрдЖ рдкрд░ рд▓реЗ рдЬрд╛рдиреЗ рдХреЗ рд▓рд┐рдП, рдореБрдЭреЗ рдмрд╕ рджреВрд╕рд░реА рд╡рд┐рд╢реЗрд╖рддрд╛ рдкреИрд░рд╛рдореАрдЯрд░ рдореЗрдВ рд╕реАрд░рд┐рдпрд▓ рдирдВрдмрд░ рдмрджрд▓рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рдФрд░ рд╡рд╛рдиреНрдпрд╛ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдУрд▓реЗрдЖ рдХреЗ рдКрдкрд░ рд╣реЛрдЧреАред



рд╕реБрд╡рд┐рдзрд╛рдЬрдирдХ рд╣реИ, рд╣реИ рдирд╛? рдореИрдВ рддреАрд╕рд░реЗ рдмреНрд░реЗрдХрдкреЙрдЗрдВрдЯ рдкреИрд░рд╛рдореАрдЯрд░ рдХреЗ рд╕рд╛рде рднреА рдРрд╕рд╛ рд╣реА рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВред рдореИрдВ рдирд┐рд░реНрджрд┐рд╖реНрдЯ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ, рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, 1280 рдкреАрдПрдХреНрд╕ред (data-da = "content__column_river, 1,1280")ред рддреЛ рд╡рд╛рдиреНрдпрд╛ рдереЛрдбрд╝реА рджреЗрд░ рдкрд╣рд▓реЗ рдУрд▓реЗрдЧрд╛ рдЬрд╛рдПрдЧрд╛, рдареАрдХ рд╣реИ рдЬрдм рдпрд╣ рдореВрд▓реНрдп рдкрд╣реБрдВрдЪ рдЬрд╛рдПрдЧрд╛ред рдФрд░ рд╕рдмрд╕реЗ рдЕрдЪреНрдЫреА рдмрд╛рдд рдпрд╣ рд╣реИ рдХрд┐ рд╡рд╛рдиреНрдпрд╛ рдЕрдкрдиреЗ рдЖрдк рдкреВрд░реА рддрд░рд╣ рд╕реЗ рд╡рд╛рдкрд╕ рдЖ рдЬрд╛рдПрдЧреАред

рдЕрддрд┐рд░рд┐рдХреНрдд рдЖрд░рд╛рдо рдХреЗ рд▓рд┐рдП, рд╡рд┐рд╢реЗрд╖рддрд╛ рдХреЗ рджреВрд╕рд░реЗ рдкреИрд░рд╛рдореАрдЯрд░ рдореЗрдВ рд╕реАрд░рд┐рдпрд▓ рдирдВрдмрд░ рдХреЗ рдмрдЬрд╛рдп, рдЖрдк рджреЛ рдореЗрдВ рд╕реЗ рдПрдХ рдорд╛рди рдирд┐рд░реНрджрд┐рд╖реНрдЯ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ - рдкрд╣рд▓рд╛ рдпрд╛ рдЕрдВрддрд┐рдоред рдЬрдм рдореИрдВ рдкрд╣рд▓реА рдмрд╛рд░ рд▓рд┐рдЦреВрдВрдЧрд╛, рддреЛ рд╡рд╛рдиреНрдпрд╛ "рдореИрдВ рдПрдХ рдирджреА рд╣реВрдБ" рд╢реАрд░реНрд╖рдХ рд╕реЗ рдЖрдЧреЗ рдмрдврд╝реВрдВрдЧрд╛ред рдпрд╣ рдЙрд╕ рд╡рд╕реНрддреБ рдХреЗ рдЕрдВрджрд░ рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ рд╕реНрдерд┐рдд рд╣реЛрдЧрд╛ рдЬрд╣рд╛рдВ рд╣рдо рдЗрд╕реЗ рднреЗрдЬрддреЗ рд╣реИрдВред рддрджрдиреБрд╕рд╛рд░, рдпрджрд┐ рдЖрдк рдЕрдВрддрд┐рдо рдирд┐рд░реНрджрд┐рд╖реНрдЯ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рд╣рдорд╛рд░рд╛ рд╡рд╛рдиреНрдпрд╛ рд╡рд╕реНрддреБ рдХреЗ рдмрд╣реБрдд рдиреАрдЪреЗ рд╣реЛрдЧрд╛ред



рдЖрдЗрдП рдПрдХ рджреЛ рдФрд░ рдЙрджрд╛рд╣рд░рдг рджреЗрдЦреЗрдВред рдорд╛рди рд▓реАрдЬрд┐рдП рдХрд┐ рд╣рдо рдХреЛрд▓рд╛ рдХреЛ рд▓реЛрдЯрд╛ рдХреЗ рдмрдЧреАрдЪреЗ рдореЗрдВ рднреЗрдЬ рд╕рдХрддреЗ рд╣реИрдВ, рдФрд░ рдЕрдиреНрдпрд╛ рдХреЛ рд╡реИрди рдФрд░ рдУрд▓рд╛ рдХреЛ рднреА рдирджреА рдореЗрдВ рднреЗрдЬ рд╕рдХрддреЗ рд╣реИрдВ, рдпрд╣ рдЕрдзрд┐рдХ рдордЬреЗрджрд╛рд░ рд╣реЛрдЧрд╛ред рд╣рдо рдХреЛрд▓рд╛ рдХреЗ рд▓рд┐рдП рдПрдХ рд╡рд┐рд╢реЗрд╖рддрд╛ рдкреИрд░рд╛рдореАрдЯрд░
рдбреЗрдЯрд╛-рджрд╛ = "content__column_garden, 2,992" рдХреЗ рд╕рд╛рде рд▓рд┐рдЦрддреЗ рд╣реИрдВ ред рдФрд░ рдПрдиреА рдХреЗ рд▓рд┐рдП рд╣рдо рдбреЗрдЯрд╛-рджрд╛ = "content__column_river, 1.1280" рд▓рд┐рдЦрддреЗ

рд╣реИрдВ: рд╣рдо рджреЗрдЦрддреЗ рд╣реИрдВ: рдирджреА рдкрд░ рдЕрдиреНрдпрд╛, рдУрд▓реЗрдирд╛ рдФрд░ рд╡рд╛рдиреНрдпрд╛ред рдХреЛрд▓реНрдпрд╛ рдереЛрдбрд╝реА рджреЗрд░ рдмрд╛рдж рд▓реЛрдЯрд╛ рдЬрд╛рддрд╛ рд╣реИред рд▓реМрдЯрдиреЗ рдкрд░, рд╕рднреА рд▓реЛрдЧ рдЕрдкрдиреЗ рд╕реНрдерд╛рдиреЛрдВ рдкрд░ рд╣реИрдВред рдкреНрд░рддреНрдпреЗрдХ рд╡рд╕реНрддреБ рдЙрддреНрддрдо рд╣реИрдВред

рдХреЛрдбрдкреИрди рдореЗрдВ рдЪрд╛рд░реЛрдВ рдУрд░ рдЦреЗрд▓реЗрдВ: codepen.io/FreelancerLifeStyle/project/full/ZmWOPm

рдмреЗрд╢рдХ, рдЖрдк рдЖрд╢реНрдЪрд░реНрдпрдЪрдХрд┐рдд рд╣реЛ рд╕рдХрддреЗ рд╣реИрдВ : рдЙрд╕ рдШрдЯрдирд╛ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреНрдпрд╛ рдЬреЛ рд░реАрдХреЙрдиреНрд╕реЗрдХреНрдЯреЗрдмрд▓ рдСрдмреНрдЬреЗрдХреНрдЯреНрд╕ рдкрд░ рд▓рдЯрдХрд╛ рджреА рдЬрд╛ рд╕рдХрддреА рд╣реИ? рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рд╢реБрд░реВ рдореЗрдВ, рдЖрдиреНрдпрд╛ рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рдиреЗ рдкрд░, рд╣рдореЗрдВ рд╢рд┐рд▓рд╛рд▓реЗрдЦ рдХреЗ рд╕рд╛рде рдПрдХ рдЦрд┐рдбрд╝рдХреА рдорд┐рд▓рддреА рд╣реИ: "рд╕рдм рдХреБрдЫ рдареАрдХ рд╣реИред" рдЖрдЗрдП рджреЗрдЦреЗрдВ рдХрд┐ рдХреНрдпрд╛ рд╣реЛрддрд╛ рд╣реИ рдЬрдм рд╡рд╣ рд▓реЛрдЧреЛрдВ рдХреЗ рд╕рд╛рде рдирджреА рдореЗрдВ рдЬрд╛рддреА рд╣реИред
рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░реЗрдВ, рдПрдХ рдХреНрд▓рд┐рдХ рдХрд░реЗрдВ - рд╕рдм рдХреБрдЫ рдареАрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рдЦрд┐рдбрд╝рдХреА рднреА рдкреНрд░рджрд░реНрд╢рд┐рдд рд╣реЛрддреА рд╣реИред рдЬрдм рдпрд╣ рд▓реЗ рдЬрд╛рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рддреЛ рд╡рд╕реНрддреБ рдХреЗ рд╕рд╛рде рдШрдЯрдирд╛ рд░рд╣рддреА рд╣реИред



рдФрд░ рджреВрд╕рд░рд╛ рд░реЛрдорд╛рдВрдЪрдХ рд╕рд╡рд╛рд▓ рд▓реЛрдб рд╣реИ, рдЬрд┐рд╕реЗ рдореИрдВрдиреЗ рдХрдо рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХреАред рдЕрдм рдореИрдВ рдЗрд╕реЗ рдЙрд╕ рдХреЛрдб рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдереЛрдбрд╝рд╛ рдмрддрд╛рдХрд░ рджрд┐рдЦрд╛рдКрдВрдЧрд╛ рдЬреЛ рдЧрддрд┐рд╢реАрд▓ рдЕрдиреБрдХреВрд▓реА рдХреЗ рд╣реБрдб рдХреЗ рдиреАрдЪреЗ рдЫрд┐рдкрд╛ рд╣реБрдЖ рд╣реИред

рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ, рдореИрдВ рдХреБрдЫ рдЪрд░реЛрдВ рдХреА рдШреЛрд╖рдгрд╛ рдХрд░рддрд╛ рд╣реВрдВ, рдЬрд┐рд╕рдореЗрдВ рдРрд░реЗ рдмрдирд╛рдирд╛ рд╢рд╛рдорд┐рд▓ рд╣реИ, рдЬрд┐рд╕реЗ рдореИрдВ рдиреАрдЪреЗ рднрд░рддрд╛ рд╣реВрдВред рдореБрдЭреЗ рд╡рд┐рд╢реЗрд╖рддрд╛ рдорд┐рд▓рддреА рд╣реИ, рдЗрд╕реЗ рдЕрд▓рдЧ рдХрд░реЗрдВ, рд╡реНрдпрдХреНрддрд┐рдЧрдд рддрддреНрд╡реЛрдВ рдХреЛ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЗрд╕реЗ рдПрдХ рд╕рд░рдгреА рдореЗрдВ рдмрджрд▓ рджреЗрдВред рдЕрдЧрд▓рд╛, рдореИрдВ рд╡рд╕реНрддреБрдУрдВ рдХреА рдореВрд▓ рд╕реНрдерд┐рддрд┐ рдХреЛ рднрд░рддрд╛ рд╣реВрдВ рддрд╛рдХрд┐ рдлрд┐рд░ рдЙрдиреНрд╣реЗрдВ рдЙрдирдХреЗ рдорд╛рддрд╛-рдкрд┐рддрд╛ рдХреЗ рд╕реНрдерд╛рди (рд╢рд╣рд░ рдореЗрдВ) рдореЗрдВ рд╡рд╛рдкрд╕ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХреЗред рдЙрд╕рдХреЗ рдмрд╛рдж, рдореИрдВ рддрддреНрд╡реЛрдВ рдХреЗ рд╕рд░рдгреА рдореЗрдВ рдЦреБрдж рдХреЛ рднрд░рддрд╛ рд╣реВрдВ, рддрд╛рдХрд┐ рдореИрдВ рд╕рд╣реА рд╕рдВрдЪрд╛рд▓рди рдХреЗ рд▓рд┐рдП рдЗрд╕реЗ рд╕реЙрд░реНрдЯ рдХрд░ рд╕рдХреВрдВред

let originalPositions = [];
let daElements = document.querySelectorAll('[data-da]');
let daElementsArray = [];
let daMatchMedia = [];
// 
if (daElements.length > 0) {
	let number = 0;
	for (let index = 0; index < daElements.length; index++) {
		const daElement = daElements[index];
		const daMove = daElement.getAttribute('data-da');
		if (daMove != '') {
			const daArray = daMove.split(',');
			const daPlace = daArray[1] ? daArray[1].trim() : 'last';
			const daBreakpoint = daArray[2] ? daArray[2].trim() : '767';
			const daDestination = document.querySelector('.' + daArray[0].trim())
			if (daArray.length > 0 && daDestination) {
				daElement.setAttribute('data-da-index', number);
				//   
				originalPositions[number] = {
					"parent": daElement.parentNode,
					"index": indexInParent(daElement)
				};
				//   
				daElementsArray[number] = {
					"element": daElement,
					"destination": document.querySelector('.' + daArray[0].trim()),
					"place": daPlace,
					"breakpoint": daBreakpoint
				}
				number++;
			}
		}
	}
	dynamicAdaptSort(daElementsArray);

	//    
	for (let index = 0; index < daElementsArray.length; index++) {
		const el = daElementsArray[index];
		const daBreakpoint = el.breakpoint;
		const daType = "max"; // MobileFirst   min

		daMatchMedia.push(window.matchMedia("(" + daType + "-width: " + daBreakpoint + "px)"));
		daMatchMedia[index].addListener(dynamicAdapt);
	}
}

рдФрд░ рдЕрдВрдд рдореЗрдВ, рдореИрдВрдиреЗ рдЬрд┐рд╕ рдСрдкреНрдЯрд┐рдорд╛рдЗрдЬрд╝реЗрд╢рди рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрд╛рдд рдХреА рдереА, рд╡рд╣ рд▓рд╛рдЧреВ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ: рдЦрд┐рдбрд╝рдХреА рдХреЗ рдЖрдХрд╛рд░ рдХреЗ рдмрдЬрд╛рдп (рд╣рд░ рд╡рд┐рдВрдбреЛ рдкрд░рд┐рд╡рд░реНрддрди рдХреЛ рд╕реБрдиреЛ), рд╣рдо рдХреЗрд╡рд▓ рд╡рд┐рдВрдбреЛ рдореИрдЪрдореАрдбрд┐рдпрд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдмреНрд░реЗрдХрдкреЙрдЗрдВрдЯ рдореЗрдВ рдмрджрд▓рд╛рд╡реЛрдВ рдХреЛ рд╕реБрдиреЗрдВрдЧреЗред рдЗрд╕ рддрд░рд╣ рд╣рдореЗрдВ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдХреЗрд╡рд▓ рдХреБрдЫ рдмрд┐рдВрджреБрдУрдВ рдкрд░ рдорд┐рд▓рддреА рд╣реИ: рдЬрд┐рдиреНрд╣реЗрдВ рд╣рдордиреЗ рдЕрдкрдиреА рд╡рд╕реНрддреБрдУрдВ рдХреА рд╡рд┐рд╢реЗрд╖рддрд╛рдУрдВ рдореЗрдВ рдЗрдВрдЧрд┐рдд рдХрд┐рдпрд╛ рд╣реИред

рдЕрдЧрд▓рд╛, рдореИрдВ рдЗрди рд╡рд┐рд░рд╛рдо рдмрд┐рдВрджреБрдУрдВ рдХреА рдПрдХ рд╕рд░рдгреА рдПрдХрддреНрд░ рдХрд░рддрд╛ рд╣реВрдВ рдФрд░ рдкреНрд░рддреНрдпреЗрдХ рд╡рд┐рд░рд╛рдо рдмрд┐рдВрджреБ рдХреЗ рд▓рд┐рдП рдПрдХ рдШрдЯрдирд╛ рд▓рдЯрдХрд╛рддрд╛ рд╣реВрдВред рдореБрдЦреНрдп рдбрд╛рдпрдиреЗрдорд┐рдХ_рдбреИрдкреНрдЯ рдлрд╝рдВрдХреНрд╢рди рдореЗрдВ, рдореИрдВ рдпрд╣ рд╕рдм рдЙрд╕ рд╕рд░рдгреА рдХреЗ рдЕрдВрджрд░ рд╡рд┐рд╕реНрддрд╛рд░рд┐рдд рдХрд░рддрд╛ рд╣реВрдВ рдЬрд┐рд╕реЗ рд╣рдордиреЗ рдПрдХрддреНрд░ рдХрд┐рдпрд╛ рдФрд░ рд╕реЙрд░реНрдЯ рдХрд┐рдпрд╛, рдмреНрд░реЗрдХрдкреЙрдЗрдВрдЯ рдХреА рдЙрдкрд╕реНрдерд┐рддрд┐ рдХреА рдЬрд╛рдВрдЪ рдХрд░реЗрдВ, рддрддреНрд╡реЛрдВ рдХреЛ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░реЗрдВ, рдпрд╛ рдЙрдиреНрд╣реЗрдВ рдЙрдирдХреЗ рд╕реНрдерд╛рди рдкрд░ рд▓реМрдЯрд╛рдПрдВред

// 
function dynamicAdapt(e) {
	for (let index = 0; index < daElementsArray.length; index++) {
		const el = daElementsArray[index];
		const daElement = el.element;
		const daDestination = el.destination;
		const daPlace = el.place;
		const daBreakpoint = el.breakpoint;
		const daClassname = "_dynamic_adapt_" + daBreakpoint;

		if (daMatchMedia[index].matches) {
			// 
			if (!daElement.classList.contains(daClassname)) {
				let actualIndex = indexOfElements(daDestination)[daPlace];
				if (daPlace === 'first') {
					actualIndex = indexOfElements(daDestination)[0];
				} else if (daPlace === 'last') {
					actualIndex = indexOfElements(daDestination)[indexOfElements(daDestination).length];
				}
				daDestination.insertBefore(daElement, daDestination.children[actualIndex]);
				daElement.classList.add(daClassname);
			}
		} else {
			//  
			if (daElement.classList.contains(daClassname)) {
				dynamicAdaptBack(daElement);
				daElement.classList.remove(daClassname);
			}
		}
	}
	customAdapt();
}

рдШрд░ рд╕реНрдерд┐рддрд┐ рд╕рдорд╛рд░реЛрд╣ рдореЗрдВ рд▓реМрдЯреЗрдВ:

//   
function dynamicAdaptBack(el) {
	const daIndex = el.getAttribute('data-da-index');
	const originalPlace = originalPositions[daIndex];
	const parentPlace = originalPlace['parent'];
	const indexPlace = originalPlace['index'];
	const actualIndex = indexOfElements(parentPlace, true)[indexPlace];
	parentPlace.insertBefore(el, parentPlace.children[actualIndex]);
}

рд╕реНрд╡рд╛рднрд╛рд╡рд┐рдХ рд░реВрдк рд╕реЗ, рдХрдИ рд▓реЛрдЧреЛрдВ рдХреЗ рдкрд╛рд╕ рдореЛрдмрд╛рдЗрд▓ рдлрд░реНрд╕реНрдЯ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдПрдХ рд╕рд╡рд╛рд▓ рд╣реИред рдХреЛрдИ рд╕рдорд╕реНрдпрд╛ рдирд╣реАрдВ рд╣реИ - рд╣рдореЗрдВ рдХреЛрдб рдореЗрдВ рдХреЗрд╡рд▓ рдХреБрдЫ рдЪрд░ рдмрджрд▓рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ (HTML рдореЗрдВ рдпрд╣ рд╕реЗрдЯрд┐рдВрдЧ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдХрд╛рдо рдХрд░ рд░рд╣реА рд╣реИ):

  1. рдЬрдм рдореИрдВ рдмреНрд░реЗрдХрдкреНрд╡рд╛рдЗрдВрдЯ рдХреА рдПрдХ рд╕рд░рдгреА рдПрдХрддреНрд░ рдХрд░рддрд╛ рд╣реВрдВ, рддреЛ рд╣рдореЗрдВ рдпрд╣рд╛рдВ "рдЕрдзрд┐рдХрддрдо" рдХреЛ "рдиреНрдпреВрдирддрдо" рдореЗрдВ рдмрджрд▓рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рдФрд░ рдШрдЯрдирд╛ "рд╕реБрдиреА-рд╕реБрдирд╛рдИ рдЬрд╛рдПрдЧреА" рдЕрдзрд┐рдХрддрдо-рдЪреМрдбрд╝рд╛рдИ рд╕реЗ рдирд╣реАрдВ, рдмрд▓реНрдХрд┐ рдиреНрдпреВрдирддрдо-рдЪреМрдбрд╝рд╛рдИ рд╕реЗред
  2. рдЖрдкрдХреЛ рд╕реЙрд░реНрдЯрд┐рдВрдЧ рдХреЛ рдмрджрд▓рдиреЗ рдХреА рднреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ рддрд╛рдХрд┐ рдЬрдм рд╣рдо рдЙрдиреНрд╣реЗрдВ рдмреНрд░реЗрдХрдкреЙрдЗрдВрдЯ рджреНрд╡рд╛рд░рд╛ рд╕реЙрд░реНрдЯ рдХрд░реЗрдВ, рддреЛ рд╕рд░рдгреА рдореЗрдВ рдСрдмреНрдЬреЗрдХреНрдЯ рдПрдХ рдЕрд▓рдЧ рдХреНрд░рдо рдореЗрдВ рд╕рдВрд░реЗрдЦрд┐рдд рд╣реЛрдВред

	// 
	function dynamicAdaptSort(arr) {
		arr.sort(function (a, b) {
			if (a.breakpoint > b.breakpoint) { return -1 } else { return 1 } // MobileFirst 
		});
		arr.sort(function (a, b) {
			if (a.place > b.place) { return 1 } else { return -1 }
		});
	}

рдЧрддрд┐рд╢реАрд▓ рдЕрдиреБрдХреВрд▓реА рдореЗрдВ рднреА, рдореИрдВ рдСрдмреНрдЬреЗрдХреНрдЯ рдХреЛ рдлреЗрдВрдХрдиреЗ рдкрд░ рд╕реВрдЪрдХрд╛рдВрдХ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдХреА рдПрдХ рдирд┐рд╢реНрдЪрд┐рдд рд╡рд┐рдзрд┐ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВред рдФрд░ рдпрд╣рд╛рдВ рдкрд╣рд▓реА рдЦрд╛рдорд┐рдпрд╛рдВ рд╣реИрдВ - рдореБрдЭреЗ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рд╡рд╕реНрддреБ рдХреЛ рдмрд╛рд╣рд░ рдХрд░рдирд╛ рд╣реЛрдЧрд╛ред рдЙрдиред рдЬрдм рдореИрдВ рд╡рд╕реНрддреБрдУрдВ рдХреЛ рдЙрд╕реА рд╕реНрдерд╛рди рдкрд░ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рддрд╛ рд╣реВрдВ, рддрд╛рдХрд┐ рд╕рдм рдХреБрдЫ рдкрд░реНрдпрд╛рдкреНрдд рд╣реЛ рдФрд░ рд╡рд╕реНрддреБрдУрдВ рдХреЛ рдЙрд╕ рдХреНрд░рдо рдореЗрдВ рдкрдВрдХреНрддрд┐рдмрджреНрдз рдХрд┐рдпрд╛ рдЬрд╛рдП, рдЬреЛ рд╣рдо рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рддреЛ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рддреЗ рд╕рдордп, рдореБрдЭреЗ рдЙрд╕реА рдмрд┐рдВрджреБ рдкрд░ рдкрд╣рд▓реЗ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рд╡рд╕реНрддреБ рдХреЛ рдмрд╛рд╣рд░ рдХрд░рдирд╛ рд╣реЛрдЧрд╛ред

//       
function indexOfElements(parent, back) {
	const children = parent.children;
	const childrenArray = [];
	for (let i = 0; i < children.length; i++) {
		const childrenElement = children[i];
		if (back) {
			childrenArray.push(i);
		} else {
			//  
			if (childrenElement.getAttribute('data-da') == null) {
				childrenArray.push(i);
			}
		}
	}
	return childrenArray;
}

рд▓реЗрдХрд┐рди рдПрдХ рдФрд░ рдЫрдБрдЯрд╛рдИ рд╕рдорд╕реНрдпрд╛ рдкрд░ рдЬреЛрд░ рджреЗрддрд╛ рд╣реИред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдпрджрд┐ рдореИрдВ рдПрдХ рд╣реА рд╕рдордп рдореЗрдВ рдПрдХ рд╣реА рд╕реНрдерд┐рддрд┐ рдореЗрдВ рд▓реЛрдЧреЛрдВ рдХреЛ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рддрд╛ рд╣реВрдВ, рддреЛ рдореИрдВ рдЙрдирдХреЗ рдЖрджреЗрд╢ рдХреЛ рдирд┐рдпрдВрддреНрд░рд┐рдд рдирд╣реАрдВ рдХрд░ рдкрд╛рдКрдВрдЧрд╛ред

рдЗрд╕ рдЧрддрд┐рд╢реАрд▓ рдЕрдиреБрдХреВрд▓реА рдХреЛ рд╡рд┐рдХрд╕рд┐рдд рдХрд░рдиреЗ рдХреЗ рддрд░реАрдХреЛрдВ рдореЗрдВ рд╕реЗ рдПрдХ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ, рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдХрдИ рдмреНрд░реЗрдХрдкреНрд╡рд╛рдЗрдВрдЯ рдХрд╛ рдирд┐рд░реНрдорд╛рдгред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рд╣рдореЗрдВ рд╡рд╛рдиреНрдпрд╛ рдХреЛ 1280x рдкрд░ рдУрд▓рд╛ рдФрд░ 992px рд╡рд╛рдиреНрдпрд╛ рдкрд░ рдмрдЧреАрдЪреЗ рдореЗрдВ рдЬрд╛рдиреЗ рдХреЗ рд▓рд┐рдП, рдпрд╛ рдЙрд╕ рд╕реНрдерд╛рди рдкрд░ рд╡рд╛рдкрд╕ рдЬрд╛рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рдпрд╣ рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рдЕрднреА рдЙрдкрд▓рдмреНрдз рдирд╣реАрдВ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдЕрднреА рднреА рдХрд╛рдо рдХрд░рдирд╛ рдмрд╛рдХреА рд╣реИред рд╕рд╛рдорд╛рдиреНрдп рддреМрд░ рдкрд░, рдЕрдиреБрдХреВрд▓реА рдореЗрдВ 95% рд░реЛрдЬрдорд░реНрд░рд╛ рдХреЗ рдХрд╛рд░реНрдпреЛрдВ рдХреЛ рдХрд╡рд░ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рдЕрдм рдЬреЛ рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рд╣реИ рд╡рд╣ рдореЗрд░реЗ рд▓рд┐рдП рдкрд░реНрдпрд╛рдкреНрдд рд╣реИред рд╡рд╕реНрддреБрдУрдВ рдХреЛ рджреВрд╕рд░реА рдЬрдЧрд╣ рд▓реЗ рдЬрд╛рдиреЗ рдХреА рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╣рд▓ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рдореБрдЭреЗ рдЕрдм рдПрдХ рд╡рд┐рд╢реЗрд╖рддрд╛ рд▓рд┐рдЦрдиреЗ рдореЗрдВ рдХреБрдЫ рд╕реЗрдХрдВрдб рдЦрд░реНрдЪ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рдФрд░ рдореБрдЭреЗ рд╡рд╣ рдкрд░рд┐рдгрд╛рдо рдорд┐рд▓реЗрдЧрд╛ рдЬрд┐рд╕рдХреА рдореБрдЭреЗ рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред

рд╕реНрд╡рд╛рднрд╛рд╡рд┐рдХ рд░реВрдк рд╕реЗ, рдореИрдВ рдмрд┐рд▓реНрдХреБрд▓ рдЙрди рд╕рднреА рд╕реЗ рдЖрдЧреНрд░рд╣ рдХрд░рддрд╛ рд╣реВрдВ рдЬреЛ рдЧрддрд┐рд╢реАрд▓ рд░реВрдк рд╕реЗ рдЕрдиреБрдХреВрд▓реА рдХреЛ рдкрд╕рдВрдж рдХрд░рддреЗ рд╣реИрдВ, рдЗрд╕рдХреЗ рдкрд░реАрдХреНрд╖рдг, рд╡рд┐рдХрд╛рд╕ рдФрд░ рджреЛрдиреЛрдВ рдХрд╛рд░реНрдпрд╛рддреНрдордХ рдФрд░ рдХреЛрдб рдХреЗ рдЕрдиреБрдХреВрд▓рди рдореЗрдВ рднрд╛рдЧ рд▓реЗрдирд╛ред рдФрд░ рдпрд╣ рд╕рдм рдЗрд╕рд▓рд┐рдП рддрд╛рдХрд┐ рд╣рдорд╛рд░реЗ рдХреЛрд╣рд▓, рдЕрдиреА, рд╡рд╛рдгреА рдФрд░ рдУрд▓реЗрдорд╛ рдЬрдм рдЪрд╛рд╣реЗрдВ рддрдм рд╕рд╛рде рд░рд╣реЗрдВред

GitHub рдкрд░ рд░рд┐рдкреЙрдЬрд┐рдЯрд░реА - github.com/FreelancerLifeStyle/dynamic_adapt

рд╡реАрдбрд┐рдпреЛ " рдбрд╛рдпрдирд╛рдорд┐рдХ рдЕрдбреИрдкреНрдЯрд┐рд╡ // рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдореЗрдВ рдХреЙрдореНрдкреНрд▓реЗрдХреНрд╕ рдСрдмреНрдЬреЗрдХреНрдЯреНрд╕ рдХрд╛ рдлрд╛рд╕реНрдЯ рдПрдбреЗрдкреНрдЯреЗрд╢рди " рдпреВрдЯреНрдпреВрдм рдЪреИрдирд▓ " рдлреНрд░реАрд▓рд╛рдВрд╕рд░ рдСрди рд▓рд╛рдЗрдл " рдкрд░ рдЖрдзрд╛рд░рд┐рдд

All Articles