Ако си оправила стиловете на страницата да изглеждат като на снимката, за responsive частта ти остава да добавиш нещо подобно:

#wrapper {
	width: 960px;
	margin: 0 auto;
}
section {
    float: left;
    width: 70%;
}
aside {
    float: left;
    width: 30%;
}
footer {
    float: left
}
aside:after, section:after {
	content: '';
    display: block;
    clear: both;
}

@media only screen and (max-width: 960px){
	#wrapper {
		width: 100%;
	}
}
@media only screen and (max-width: 780px) {
	section, aside {
		width: 100%;
	}
}
@media only screen and (max-width: 640px) {
	#header {
		display: block;
		text-align: center
	}
}

Като #header id-то съм го добавил на заглавието, за да може когато екрана стане по-малък от 640px да слезе на нов ред и да е посредата :)

Здравей! :)  Ще споделя моя опит без претенции, че това е най-правилният начин. Смятам, че това задаване на конкретен интервал (като max width:960 and min-width:780) не е много добра идея. Причина - защото така всяка следваща заявка няма да взема никакви правила от по-горната, а ще прилага базово това, което ти е в основния CSS и вече новото, което ще напишеш в самата нея. Това може да доведе до писането на едно си също правило няколко пъти в няколко поредни заявки. Аз подреждам заявките така, използвайки само max-width: 

@media screen and (max-width: 960px) {

.........

}

@media screen and (max-width: 780px) {

.........

}

@media screen and (max-width: 640px) {

.........

}

Когато използваш max-width, е много важно да подреждаш заявките в низходящ ред по стойност на резолюцията. Ако започнеш от по-малките стойности (640px в случая и продължиш с 780, след което 960) и използвайки max-width, ще стане пълна каша, защото всяка следващата заявка ще презаписва правилата от предходната, тъй като примерно в условието max-width: 780px попадат всички размери на екрана, по-малки от 780, включително 640 и по-надолу. 

Ако използваш min-width, правилото е точно обратното (започваш да пишеш заявките от по-малките резолюции (в случая 640) и нататък продължаваш във възходящ ред, поради същите причини. :)

Относно описването на елементите - описваш тези, които се променят от една резолюция в друга (изображенията в ресурсите показват тези промени). Ето пример как съм стилизирала менюто при най-малката резолюция: 

@media screen and (max-width: 640px) {
 
  nav {
    width: 93.2%;
    margin-left: 1%;
    margin-top: 26px;
  }
  nav ul {
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  nav ul li {
    width: 100%;
    display: block;
  }

Аз цял ден си играя със респонсив домашното и горе-долу го направих както трябва. Така както ти си го написала е ок, просто сега почваш в скобите на всяка резолюция да пишеш css така, както искаш да изглежда сайта при тази резолюция. Аз използвах float, positiion, margin и т.н. Експериментирай със инспектора на браузъра си, като го пуснеш на mobile view (май така беше).

Здравей ,сега правя 3-та задача за първата и втората трябва да знаеш следното пишеш си css както обикновено после създаваш медиите и в тях вкарваш само елементите които искаш да промениш например article го искаш на целия екран когато екрана е голям до 960 пиксела значи   :

 section > article {
        width: 100%;
    }

нз колко е добро обяснението ми но качих тук ако искаш го разгледай https://github.com/Ivokin/SoftUni/tree/master