title: Spanning Bootstrap column
body: <p>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).</p>
  
  <p><a href="https://i.stack.imgur.com/rrWaA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rrWaA.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/GJTml.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GJTml.png" alt="enter image description here"></a></p>
  
  <p>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).</p>
  
  <p>Below is my HTML structure - I have removed the yellow bar part as I dont really know where it should go...</p>
  
  <pre><code>&lt;div class="col-md-4"&gt;
      col 1 header&lt;br/&gt;col 1 contents
  &lt;/div&gt;
  &lt;div class="col-md-4"&gt;
      col 2 header&lt;br/&gt;col 2 contents
  &lt;/div&gt;
  &lt;div class="col-md-4"&gt;
      col 3 header&lt;br/&gt;col 3 contents
  &lt;/div&gt;
  </code></pre>
  
  <p>If anyone can advise if thats possible to do with Bootstrap and give me some direction it would be much appreciated.</p>