CODEWITHSUNDEEP
javascripthtmlcss
David Smith
David Smith

Reputation: 511

Responsiveness layout - reorganizing divs

Is there any way to go from desktop layout to mobile layout as shown on the image below using CSS? (responsiveness layout).

On the image below, every square is a div including the red square (anonymous).
I have the following divs: {A, B, C, D, red}.

On my requirements it is not possible to move the div A inside the red div (html source code). I just need the rendering takes care to put div A after div B.

enter image description here

Below you have a sample you can run by yourself.
Also you have the jsfiddle here: https://jsfiddle.net/tjztgn5d/

* {
  font-family: Arial;
}
#red {
  float: left;
  border: 1px solid #F00;
  padding: 10px;
}
.header {
  padding: 10px auto;
  text-align: center;
}
#A {
  float: left;
  width: 140px;
  height: 210px;
  border: 1px solid #D79B00;
}
#A > .header {
  background-color: #FFE6CC;
  border-bottom: 1px solid #D79B00;
}
#B {
  width: 140px;
  height: 188px;
  border: 1px solid #6C8EBF;
}
#B > .header {
  background-color: #DAE8FC;
  border-bottom: 1px solid #6C8EBF;
}
#C, #D {
  width: 140px;
  height: 88px;
}
#C {
  border: 1px solid #B85450;
  margin-bottom: 10px;
}
#C > .header {
  background-color: #F8CECC;
  border-bottom: 1px solid #B85450;
}
#D {
  border: 1px solid #9673A6;
}
#D > .header {
  background-color: #E1D5E7;
  border-bottom: 1px solid #9673A6;
}
<div id="A">
  <div class="header">A</div>
</div>
<div id="red">
  <div id="B" style="float:left;margin-right:10px;">
    <div class="header">B</div>
  </div>
  <div style="float:left;">
    <div id="C">
      <div class="header">C</div>
    </div>
    <div id="D">
      <div class="header">D</div>
    </div>
  </div>
</div>

Any idea on how to achieve this without Javascript?

Upvotes: 0

Views: 40

Answers (2)

Jorjon
Jorjon

Reputation: 5434

Yes, this can be done without altering the HTML or using Javascript. The trick is to use absolute positioning. It can work in your case because you are using fixed sizes anyway.

https://jsfiddle.net/anzL79py/

This is what I have added:

@media (max-width: 512px) {
  /* erase inline styles. dont use them anymore! */
  #B {
    float: unset !important;
    margin-right: unset !important;
  }
  #B + div {
    float: unset !important;
  }

  #A {
    position: absolute;
    left: 19px;
    top: 218px;
  }
  #B {
    margin-bottom: 230px;
  }
}

And the full snippet. 

* {
  font-family: Arial;
}
#red {
  float: left;
  border: 1px solid #F00;
  padding: 10px;
}
.header {
  padding: 10px auto;
  text-align: center;
}
#A {
  float: left;
  width: 140px;
  height: 210px;
  border: 1px solid #D79B00;
}
#A > .header {
  background-color: #FFE6CC;
  border-bottom: 1px solid #D79B00;
}
#B {
  width: 140px;
  height: 188px;
  border: 1px solid #6C8EBF;
}
#B > .header {
  background-color: #DAE8FC;
  border-bottom: 1px solid #6C8EBF;
}
#C, #D {
  width: 140px;
  height: 88px;
}
#C {
  border: 1px solid #B85450;
  margin-bottom: 10px;
}
#C > .header {
  background-color: #F8CECC;
  border-bottom: 1px solid #B85450;
}
#D {
  border: 1px solid #9673A6;
}
#D > .header {
  background-color: #E1D5E7;
  border-bottom: 1px solid #9673A6;
}

@media (max-width: 512px) {
  /* erase inline styles. dont use them anymore! */
  #B {
    float: unset !important;
    margin-right: unset !important;
  }
  #B + div {
    float: unset !important;
  }
  
  #A {
    position: absolute;
    left: 19px;
    top: 218px;
  }
  #B {
    margin-bottom: 230px;
  }
}
<div id="A">
  <div class="header">A</div>
</div>
<div id="red">
  <div id="B" style="float:left;margin-right:10px;">
    <div class="header">B</div>
  </div>
  <div style="float:left;">
    <div id="C">
      <div class="header">C</div>
    </div>
    <div id="D">
      <div class="header">D</div>
    </div>
  </div>
</div>

Upvotes: 1

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

In your case by not using JS, it would be better to use

Bootstrap Column + Flexbox in Media Query

.contain{
  max-height:800px;
}
.A{
  color:white;
  font-size:100px;
  background:red;
  height:100vh;
  border:10px solid white;
}
.B{
  color:white;
  font-size:100px;
  background:green;
  height:100vh;
  border:10px solid white;

}
.C{
  color:white;
  font-size:100px;
  background:blue;
  height:50vh;
    border:10px solid white;

}
.D{
  color:white;
  font-size:100px;
  background:pink;
  height:50vh;
    border:10px solid white;

}

@media only screen and (max-width: 768px) {
  .contain{
    display:flex;
    flex-direction:column;
  }
  .A{
    order:2;
    border:0px;
  }
  .B{
    order:1;
    border:0px;
  }
  .three{
    order:3;
    border:0px;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
<div class="row contain">
  <div class="col-sm-4 A">1</div>
  <div class="col-sm-4 B">2</div>
  <div class="col-sm-4 three">
    <div class="row">
      <div class="col-sm-12 C">3</div>
      <div class="col-sm-12 D">4</div>
    </div>
  </div>
</div>
</div>

Upvotes: 0

Related Questions