CODEWITHSUNDEEP
htmlcss
Miguel Betancourt
Miguel Betancourt

Reputation: 1

Move div on windows resize

I want to relocate divA below divB but i just cant get it. I've tried using float which it seems its the solution for this but it still doesn't work.

Here is is my CSS code:

.tweet-box{
  position:fixed;
  top: 140px;
  left: 75px;
  float: left;
  width:100%;
}

HTML:

<div id="logo"></div>    
<div id="div1">
Some content
</div>
<div id="div2">
Some content
</div>

Example:

eg

Upvotes: 0

Views: 42

Answers (2)

Danish Ahmed
Danish Ahmed

Reputation: 538

Create a parent element and make it display:flex; and adjust direction of flex according to it. Use media queries for responsive. .parent-div { display:flex; }

Upvotes: 0

tao
tao

Reputation: 90048

You have to wrap both #div1 and #div2 inside a common parent, with display:flex and specify different order below the device width of your choice (768px in the example below):

.reorder-wrapper {
  display: flex;
}
#div1, #div2 {
  border: 2px solid red;
  flex-grow: 1;
  margin: 5px;
  padding: 5px;
}
#logo {
  text-align: center;
}

#div2 {
    order: -1;
  }
@media (max-width: 768px) {
  .reorder-wrapper {
    flex-direction: column;
  }
  #div2 {
    order: 1;
  }
}
<div id="logo">This is logo</div>
<div class="reorder-wrapper">
  <div id="div1">
    Some content: #div1
  </div>
  <div id="div2">
    Some content: #div2
  </div>
</div>

Note: this is not the only way to do it and, based on your needs another technique might be better for the result. You need to update your question with a Minimal, Complete and Verifiable example if you have trouble applying the above principle to your case.

Upvotes: 1

Related Questions