CODEWITHSUNDEEP
htmlcssposition
Ali Veliyev
Ali Veliyev

Reputation: 43

Position of div blocks (simple css issue)

I have an issue in my project:

<div id="div1"></div>
<div id="div2"></div>

I do in css for desctop @media (min-width:768px) options display block and float left. For first with 70% for second 30%. In mobile I need 100% width both of them and need to display div2 on top div1. Float right for first and float left for second not working. Need your help guys.

Upvotes: 0

Views: 50

Answers (2)

T.Chmelevskij
T.Chmelevskij

Reputation: 2139

How about this? Flex box allows you to specify the direction of it and also if you are really picky you can specify order number on the item itself.

#container {
  display: flex;
}

#div2 {
   width:30%;
   height:300px;
   background:red;
}

#div1 {
   width:70%;
   height:300px;
   background:green;
}

@media only screen and (max-width: 768px) {
  #div1, #div2{
    width: 100%;
  }
  #container {
    flex-flow: column-reverse;
  }
}
<div id="container">
  <div id="div1">1</div>
  <div id="div2">2</div>
</div>

Upvotes: 2

Yi Zhou
Yi Zhou

Reputation: 813

If you want div2 on top, your html have to move div2 on top of div1

#div2 {
   width:30%;
   height:300px;
   background:red;
   float:right
}

#div1 {
   width:70%;
   height:300px;
   background:yellow;
   float:left
}

@media only screen and (max-width: 768px) {
#div1, #div2 {
  width:100%;
}
}
<div id="div2">div2</div>
<div id="div1">div1</div>

Upvotes: 1

Related Questions