A
A
Andrey Filimonov2017-04-10 18:04:58
css
Andrey Filimonov, 2017-04-10 18:04:58

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

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 the question

In order to leave comments, you need to log in

1 answer(s)
I
Islam Ibakaev, 2017-04-11
@fil_and

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question