Problem z elementami podczas zmiany rozdzielczości

Hejo!

Mam pewien mały problem z trzema kolumnami, które zmieniają pozycje podczas zmiany rozdziałki wyświetlacza. Oto kod tych kolumn:

<div class="col-2 col-3 col-6 div1">
</div>
<div class="col-2 col-6 col-6 div2">
</div>
<div class="col-2 col-3 col-6 div3">
</div>

Oczywiście nie uzywam bootstrapa, tylko nazwy sobie wziąłem pożyczyłem Ale chodzi o to, że co .col-2 ma 33.3% szerokości, .col-2 ma 50% szerokości a .col-6 ma 100% szerokości i oczywiście col .col-2 i .col-3 ma ustawione float:left;

I problem polega na tym, że w div1 jest zwykły obrazek, w div2 logo a w div3 button. I podczas zmiany rozdziałki np. na 767px zaczyna działać druga kolumna klas i tutaj mam kłopot. Otóż zamiast robić taki układ strony:

 

    LOGO

IMG BUTTOM

 

to robi się coś takiego:

 

IMG LOGO

       BUTTON

 

Czy da się jakoś zrobić tak aby nie zmieniać pozycji startowej elementów, że div z IMG i BUTTON przechodzą na dół a LOGO zostaje na górze?

Użytkownik wolfdz edytował ten post 06 czerwca 2015 - 17:23

Nie do końca rozumiem sens nadawania trzech klas określających szerokość elementu.

<div> div.Logo </div>
<div> div.img div.button </div>

No bo .col-2 odnosi się do szerokości od 980px, .col-3 od 481px a col-6 do 979px

I po prostu gdy zmienia sie rozdzielczość to inna klasa zaczyna działać 

Użytkownik wolfdz edytował ten post 06 czerwca 2015 - 19:01

Jakiś przykład live ?

Bardzo bez sensu to zrobiłeś Nie nadaje się tak elementom wszystkich klas. Po prostu nadaj im odpowiednie klasy i ostyluj typu:

<div id="kolumny">
<div class="lewa"> ... </div>
<div class="srodek"> ... </div>
<div class="prawa"> ... </div>
</div>

#kolumny {}
#kolumny .lewa { width: 33% }
#kolumny .srodek { width: 33% }
#kolumny .prawa { width: 33% }

@media (max-width: 1200px) {

#kolumny .lewa { width: 25% }
#kolumny .srodek { width: 50% }
#kolumny .prawa { width: 25% }

}

Oczywiście szerokości i rozdzielczości ustawiasz tak jak Ci pasuje. To co próbujesz ustalić to się robi przy stałych szerokościach. Czyli gdy masz np 3 kolumny równych szerokości które po zmniejszaniu rozdzielczości równo się skalują, a nie tak że jedna przeskakuje na 50% szerokości a pozostałe na 25%