CODEWITHSUNDEEP
htmlcssflexbox
user2404804
user2404804

Reputation: 523

Re-sizing and re-ordering elements between desktop and mobile layouts

I'd like to achieve the following with CSS only (left is mobile layout, right is desktop after breakpoint):

enter image description here

The challenge here obviously is that from a float point of view the element order changes: on mobile the green item is the second, but on desktop it's the first.

Is this possible to achieve with pure CSS? Possibility would be flex-box but I don't have enough experience to recreate this layout.

Upvotes: 1

Views: 72

Answers (3)

wscourge
wscourge

Reputation: 11291

There is also no-flex solution, fiddle (just replace media-query min-width with whatever breakpoint you consider phone width ends):

HTML:

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

CSS:

div {
  width: 50%;
}
.div1 {
  background-color: red;
  float: right;
  height: 200px;
}
.div2 {
  background-color: green;
  float: left;
  height: 400px;
}
.div3 {
  background-color: blue;
  float: right;
  height: 200px;
}
@media (max-width: 500px) {
  .div1, .div2, .div3 { width: 100%;}
}

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371213

#container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 400px;                   /* 1 */
}
.box {
  width: 50%;
}
.box1 {
  background-color: lightgreen;
  height: 400px;
}
.box2 {
  background-color: orangered;
  height: 200px;
}
.box3 {
  background-color: aqua;
  height: 200px;
}
@media (max-width: 600px) {
  #container { height: auto; }     /* 2 */
  .box       { width: 100%;  }
  .box2      { order: -1;    }     /* 3 */
}
/* purely decorative styles */
.box {
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
}
* { box-sizing: border-box; }
<div id="container">
  <div class="box box1"><span>1</span></div>
  <div class="box box2"><span>2</span></div>
  <div class="box box3"><span>3</span></div>
</div>

jsFiddle

Notes:

  1. Without a fixed height in a column wrap container, flex items don't know where to wrap. So, for your larger screen, define a height which forces the second item to a new column.

  2. Now you're in a mobile layout and wrapping is no longer necessary. The container needs to be twice the height of the desktop layout. Release the height.

  3. Tell the red box to re-position itself first on the list. (The initial order value for flex items is 0.)

Upvotes: 3

Nenad Vracar
Nenad Vracar

Reputation: 122047

Yes you can do this if you can set fixed height on flex-container. You just need to use flex-direction: column and flex-wrap: wrap and then change order with media-queries.

.content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.a {
  height: 200px;
  background: #00FF02;
}
.b {
  height: 100px;
  background: red;
}
.c {
  height: 100px;
  background: blue;
}
@media(min-width:768px) {
  .content {
    height: 200px;
  }
  .content > div {
    width: 50%;
  }
}
@media(max-width:768px) {
  .b {
    order: -1;
  }
}
<div class="content">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

Upvotes: 1

Related Questions