1

http://shoelace.io/#7f34fe76be20d73e7e28d03db5e311d4

<div class="container">
  <div class="row">
    <div class="col-md-6">A</div>
    <div class="col-md-6">B</div>
    <div class="col-lg-6">C</div>
    <div class="col-lg-6">D</div>
  </div>
</div>

Given the above structure, why does C overlay both B and A on the medium resolution?

What I was expecting: What I was expecting: What I see: enter image description here

Ryan Leach
  • 4,262
  • 5
  • 34
  • 71

4 Answers4

1

Bootstrap col-x-* classes that fall beneath a media query have all css inherited from the col-x-* class removed.

The reason why they default to full width, is not because of a design intention by bootstrap, but is the default behaviour for those divs.

This is counter-intuitive to their documentation which suggests it as a valid method of falling back to mobile.

It is not optional to include the col-xs-12 class if you are using a greater class and wish it to break to full width!

changing the code to 

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6">A</div>
    <div class="col-xs-12 col-md-6">B</div>
    <div class="col-xs-12 col-lg-6">C</div>
    <div class="col-xs-12 col-lg-6">D</div>
  </div>
</div>

Will resolve the issue, you do not need to specify col-sm-12 as col-xs-12 will apply.

This is due to bootstrap not applying floats to auto-expanded divs (for whatever reason I'm not sure)

https://github.com/twbs/bootstrap/issues/17998

https://github.com/twbs/bootstrap/issues/17603

Ryan Leach
  • 4,262
  • 5
  • 34
  • 71
0

Use 

col-md-# for medium screen size

col-lg-# for large screen size

and if you want same size element in all screen sizes use same class instead

<div class="container">
  <div class="row">
    <div class="col-md-6">A</div>
    <div class="col-md-6">B</div>
    <div class="col-md-6">C</div>
    <div class="col-md-6">D</div>
  </div>
</div>
Prashant Sharma
  • 3
  • 1
  • 4
0

Hi if i understand correctly. you want to show 2 alligned in top. 1 full under those two and under that one another full width one.

If this is the problem I would suggest this: 

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6 col-lg-6">A</div>
    <div class="col-xs-12 col-md-6 col-lg-6">B</div>
    <div class="col-xs-12 col-md-12 col-lg-6">C</div>
    <div class="col-xs-12 col-md-12 col-lg-6">D</div>
  </div>
</div>
B. Dionys
  • 916
  • 7
  • 34
  • You understand correctly, however your answer appears to have extra classes? Are they necessary? – Ryan Leach Mar 24 '17 at 00:24
  • well probably not but i put them in most of the time for insurance so. now i know it will always do what i want. on small screen 4 under eachother. medium sized 2 next to eachother and 2 underneath and large its 2 rows of 2 alligned – B. Dionys Mar 24 '17 at 07:19
0

Ignore the Colors, they are just for demo purpose.

.bg {
  height: 100px;
  border: 2px solid #000;
}

.bg-blue {
  background: #00A2E8;
}

.bg-yellow {
  background: #FFF200;
}

.bg-red {
  background: #ED1C24;
}

.bg-green {
  background: #22B14C;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6 bg bg-blue"></div>
    <div class="col-xs-12 col-md-6 bg bg-yellow"></div>
    <div class="col-xs-12 col-lg-6 bg bg-red"></div>
    <div class="col-xs-12 col-lg-6 bg bg-green"></div>
  </div>

</div>
Deepak Yadav
  • 6,804
  • 5
  • 31
  • 49
  • Is my assumption that you don't need to specify col-xs-12 if you are using a higher class incorrect? – Ryan Leach Mar 24 '17 at 00:23
  • In older versions, a `clearfix` issue would cause. So as to fix it, this had to be done. Now i don't think, its required. Couldn't find the written proof in the Official documentation now. But whenever I get it, would definitely share it. – Deepak Yadav Mar 24 '17 at 08:05