Responsive Layout : How to switch positions in smartphone layout

Question

I how can I solve this responsive layout case: I have three boxes. On wide screens I want two of them on the left with a fixed width and the other one on the right. On small screens I want all boxes to become 100% and the right one to be between the other two.

I´ve made a fiddle that almost works, but I need to get rid of that gap in wide mode.

https://jsfiddle.net/ypmgo7no/3/

.leftfixed {
  float:left;
  width:200px;
  background:purple;
  height:50px;
}

.right {
  margin-left:220px;
  background:yellow;
  height:100px;
}

@media (max-width:500px) {
  .leftfixed {
    float:none;
      width:100%;
      background:blue;
   }

   .right {
     margin-left:0;
     }
}

See the problem: (sorry, just realised that "Wide mode" and "Small mode" in the image are interchanged) Image

media queries are not the problem. Please read the Question. Thanks — Web-Entwickler, Apr 07 '16 at 07:50
@SatejS: Sorry, I updated the fiddle, the boxes need to have height: https://jsfiddle.net/ypmgo7no/3/ — Web-Entwickler, Apr 07 '16 at 07:53
if you are talking about gap between two purple div then its because of height of right yellow div.. — Leo the lion, Apr 07 '16 at 07:58
It might be help you check it http://stackoverflow.com/questions/19929213/bootstrap-change-div-order-with-pull-right-pull-left-3-columns — Balvant Ahir, Apr 07 '16 at 07:58
That's primarily happening because the your right hand side div is placed before the third div, and this that much space is occupied. — Satej S, Apr 07 '16 at 07:58
You want something like this is what I'm guessing https://jsfiddle.net/wx5ck69s/ It isn't responsive in a smaller mode in this case — Satej S, Apr 07 '16 at 08:00
@Leothelion But thats the point, that the right div has a specific height... so your fiddle doesnt help: https://jsfiddle.net/ypmgo7no/8/ — Web-Entwickler, Apr 07 '16 at 08:06
@BalvantAhir: Looks interesting, but I don´t know if and how this can be adepted to fit to this case — Web-Entwickler, Apr 07 '16 at 09:41

Sagar Kodte · Answer 1 · 2016-04-07T08:05:27.060

0

Do you want like this?

.leftfixed {
  float:none;
  width:200px;
  background:purple;
  height:100px;
}

.right {
    left: 220px;
    background: yellow;
    height: 200px;
    position: absolute;
    width: 100%;
    top: 7px;
  }

@media (max-width:500px) {
  .leftfixed {
    float:none;
      width:100%;
      background:blue;
   }
   
   .right {
     margin-left:0;
     position:inherit;
     
     }
}

<div class="leftfixed">
box left fixed width 1
</div>

<div class="right">
box right
</div>

<div class="leftfixed">
box left fixed width 2
</div>

edited Apr 07 '16 at 08:05

answered Apr 07 '16 at 08:00

Sagar Kodte

3,723
4
23
52

Ok that works, but I thought there could be a solution without position:absolute :-/ – Web-Entwickler Apr 07 '16 at 08:10
okay. No problem. I will try without trying position:absolute. wait for minute. – Sagar Kodte Apr 07 '16 at 08:13
you don't want to use position property anywhere?? – Sagar Kodte Apr 07 '16 at 08:19
ideally not :) But I don´t know it it´s possible – Web-Entwickler Apr 07 '16 at 08:21
because position property have to use. i made updated still there is position property is used – Sagar Kodte Apr 07 '16 at 08:25

score 0 · Answer 2 · answered Apr 07 '16 at 08:31

0

This is another method i added class bottom to last div and added position:relative and bottom:100px in your original code.

.leftfixed {
  float:left;
  width:200px;
  background:purple;
  height:100px;
}

.right {
    margin-left: 220px;
    background: yellow;
    height: 200px;
    /*position: absolute;*/
    width: 100%;
    top: 7px;
  }
  .bottom{
       position: relative;
     bottom: 100px;
  }

@media (max-width:500px) {
  .leftfixed {
    float:none;
      width:100%;
      background:blue;
   }
   
   .right {
     margin-left:0;
   
     
     }
}

<div class="leftfixed">
box left fixed width 1
</div>

<div class="right">
box right
</div>

<div class="leftfixed bottom">
box left fixed width 2
</div>

answered Apr 07 '16 at 08:31

Sagar Kodte

3,723
4
23
52

Instead of posting two answer, you should updated your last one or add this in last answer.. – Leo the lion Apr 07 '16 at 09:23
ya. Actually i added 2nd answer separately because @flasher will understand. – Sagar Kodte Apr 07 '16 at 09:31
please tell me. My answers are proper or not? – Sagar Kodte Apr 07 '16 at 09:32

Responsive Layout : How to switch positions in smartphone layout

2 Answers2