Why doesn't a div go down below another div?

Question

css

Hello,
why doesn't the for_text_kontakt block go under aside_kontakt when the screen is reduced to less than 659 px?
Here's the code without the extra stuff. Full code on the page.

<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;
}
}

here is the page

Answer 1

do you need it

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

you also need to remove the floats from the child elements, since you are using flexbox.
your example here
ps be so kind as to put it in the sandbox yourself