Почему div не уходит вниз под другой div?

Question

[Андрей Филимонов]

Здравствуйте,
почему блок for_text_kontakt не уходит под aside_kontakt при уменьшении экрана меньше 659 px?
Вот код без лишнего. Полный код на странице.

<div class="sct_kontakt">


<div class="for_text_kontakt">
 основное содержание
    	
</div>

<div class="aside_kontakt">
содержание асайда
</div>
</div>

.sct_kontakt {display: flex; width:100%; height:auto; margin: 0 0 25px 0; background: url(http://vh166963.eurodir.ru/wp-content/themes/gymbalance/images/fon-gimnastika.png) repeat; position:relative; z-index:2;}

.for_text_kontakt { display:block;
  float: left;
  width: 70%;
  padding: 1%;
  margin-right: 1%;
order: 1;
}

.aside_kontakt { display:block;
  float: left;
  width: 28%;
margin-top: 20px;
height: auto;
border-radius:3px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
color: black;
background: white;
order: 2;
}

@media only screen and (max-width: 659px) {
.for_text_kontakt {
width:100%;
order: 2;
}
.aside_kontakt { 
width:100%;
order: 1;
}
}

вот страница

Comments

[Ankhena]

Разберитесь с кашей из float и order.

[Андрей Филимонов]

Ankhena W: извините, а почему каша, вроде всё правильно:
когда большой экран:

.for_text_kontakt {
  float: left;
  width: 70%;
order: 1;
}

.aside_kontakt {
  float: left;
  width: 28%;
order: 2;
}

На первом месте .for_text_kontakt, а на втором .aside_kontakt. Float:left у обоих чтобы были на одном уровне, не съезжали.
Когда экран меньше 659 px:

.for_text_kontakt {
width:100%;
order: 2;
}
.aside_kontakt { 
width:100%;
order: 1;
}

На первом месте .aside_kontakt, а на втором .for_text_kontakt. Ширина у них 100 % по идее должен сначала один блок идти, за ним второй. Убрал float:left и обнулил margin в мобильном виде, ничего не изменилось. Почему каша?

[Ankhena]

Андрей Филимонов: Потому что если флекс, то флоат зачем?
Либо флоат и менять left и right. Либо флекс и менять order.

[Андрей Филимонов]

Ankhena W: экспериментировал, но вот, сейчас убрал по очереди и float, а затем и display:block. Не помогает(

.for_text_kontakt {
  width: 70%;
  padding: 1%;
  margin-right: 1%;
order: 1;
}
.aside_kontakt { 
  width: 28%;
margin-top: 20px;
height: auto;
border-radius:3px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
color: black;
background: white;
order: 2;
}

@media only screen and (max-width: 659px) {
.for_text_kontakt {
width:100%;
order: 2;
margin:0;
}
.aside_kontakt { 
width:100%;
order: 1;
margin:0;
}
}

[Ankhena]

Андрей Филимонов: так, а где flex-wrap: wrap?

[Андрей Филимонов]

Ankhena W: да, этого не хватало, спасибо. Думал display: flex и order достаточно

Answer 1

[Islam Ibakaev]

тебе нужно это

@media only screen and (max-width: 659px) {
	.sct_kontakt {
		flex-direction: column-reverse;
	}
}

также нужно убрать флоаты у дочерних элементов, раз уж ты флексбокс используешь.

твой пример здесь

p.s. будь так добр, выкладывай в песочницу сам

Comments

[Андрей Филимонов]

Спасибо, рабочий вариант. Но в моём случае ошибка была в том, что в дочерних элементах flex-wrap: wrap не указал

Answer 2

[Андрей Филимонов]

Спасибо Ankhena W . Я не проставил flex-wrap: wrap у дочерних элементов