0

I need help with getting Bootstrap layout as per image below. I cant figure out how to get the yellow bar to appear with the full width of the Bootstrap container without affecting the way the columns should stack up on the mobile view (second image).

enter image description here

enter image description here

So I dont need the yellow bar to be displayed on mobile view but the order of how the columns stack up has to be preserved. I have tried inserting a div in the middle column and force it to go outside of it but it didnt really work (the closest I got was with negative margin but that just overlaps the other columns and I dont really know exact number I should apply for each margin to make it look good).

Below is my HTML structure - I have removed the yellow bar part as I dont really know where it should go...

<div class="col-md-4">
    col 1 header<br/>col 1 contents
</div>
<div class="col-md-4">
    col 2 header<br/>col 2 contents
</div>
<div class="col-md-4">
    col 3 header<br/>col 3 contents
</div>

If anyone can advise if thats possible to do with Bootstrap and give me some direction it would be much appreciated.

Zyga
  • 2,367
  • 3
  • 22
  • 32

3 Answers3

2

if cols headers and yellow div has fixed height you can margin between header and content and set yellow div by absolute between them

Heidar Ammarloo
  • 421
  • 2
  • 11
1

Bootstrap classes for push and pull cols for different devices can help.

Just put xs instead of lg and refer the following link.

Bootstrap 3: pull-right for col-lg only

and for hiding your yellow div, use .hidden-xs

You can use col-xs-pull-6 or col-xs-pull-12 on your content.

I would have solved it if you mentioned your code in your question.

Community
  • 1
  • 1
Tirthraj Barot
  • 2,671
  • 2
  • 17
  • 33
1

Instead of Bootstrap I think the best way is using flexbox. You have to reorder all the divs to get desired effect but with Bootstrap columns you will find many problems. This is my solution (resize to view how it works):

*{
  box-sizing: border-box;
}

.wrapper div {
  border-width: 2px;
  border-style: solid;
  padding: 5px;
}

.wrapper div:nth-child(1),
.wrapper div:nth-child(2) {
  border-color: red;
}

.wrapper div:nth-child(3),
.wrapper div:nth-child(4) {
  border-color: blue;
}

.wrapper div:nth-child(5),
.wrapper div:nth-child(6) {
  border-color: green;
}

.wrapper .yellow {
  display: none;
}

@media (min-width:768px) {
  .wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  .wrapper div {
    flex: 1 1 33%;
  }
  .wrapper div:nth-child(1) {
    order: 1;
  }
  .wrapper div:nth-child(2) {
    order: 5;
  }
  .wrapper div:nth-child(3) {
    order: 2;
  }
  .wrapper div:nth-child(4) {
    order: 6;
  }
  .wrapper div:nth-child(5) {
    order: 3;
  }
  .wrapper div:nth-child(6) {
    order: 7;
  }
  .wrapper .yellow {
    display: block;
    border-color: yellow;
    order: 3;
    flex: 0 0 100%;
    text-align: center;
  }
}
<div class="wrapper">
  <div>col 1 header</div>
  <div>col 1 contents</div>

  <div>col 2 header</div>
  <div>col 2 contents</div>

  <div>col 3 header</div>
  <div>col 3 contents</div>

  <div class="yellow">div with full width</div>
</div>