Media queries, sass - drobny problem

Question

Mam do zrobienie takie zadanie. Jest prawie rozwiazane poza jednym podkreslonym podpunktem, moze ktos mi podpowie jak to zrobic? Probowalem roznych ustawien flexa ale nie wychodzi mi nic. Nie wiem jak ustawic zeby byly pod soba kolejno a nie w rzadku ;(

* na ekrantach mniejszych niż `450px`, ustaw elementy pod sobą i ukryj ostatni, 
* na ekranach większych niż `450px`, ale mniejszych niż `720px`, ustaw elementy obok siebie, pokaż ostatni i ukryj pierwszy, 
* na ekranach większych niż `720px`, ale mniejszych niż `1024px`, pokaż tylko ostatni i pierwszy element. 
Skorzystaj z podejścia **Mobile first**. 

Kod ponizej: 

.block{
  width: 25%;
  height: 100vh;
  border: 1px solid red;
  box-sizing: border-box;
  float: left;
@media (max-width: 450px){
  &:last-child{
  display: none;
    }
  }
  @media (min-width:451px) and (max-width:720px){
    display: inline-block;
    &:first-child{
      display: none;
    }
  }
@media (min-width:721px) and (max-width:1024px){
  display: none;
    &:first-child{
      display: inline-block;
}
    &:last-child{
      display: inline-block;
    }
  }
}

 

Comments

ustaw elementy pod sobą

Do tego służy display: block; 

---

Tego tez probowalem ale nie chce dzialac. Wyswietlaja sie 4 elementy wiec display: none dziala ale elementy sa dalej ulozone obok siebie a nie jeden pod drugim.

---

Wyświetlają się obok siebie, bo masz:

float: left;

Do @media (max-width: 450px){ wrzuć:

clear: left;

 

---

Dzieki!