title: Bootstrap: Content spanning multiple grid columns?
body: <p>My Bootstrap grid is divided into three columns: a sidebar and two content columns.</p>
  
  <pre><code>&lt;div class="col-xs-2"&gt;
      Sidebar column.
  &lt;/div&gt;
  &lt;div class="col-xs-3"&gt;
      Left content column.
  &lt;/div&gt;
  &lt;div class="col-xs-7"&gt;
      Right content column.
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd like to display a confirmation message that spans across the two content columns but not the sidebar.  Is it possible to do this without altering the bootstrap grid layout?</p>
  
  <p>Example (in ugly HTML tables):<br>
  <a href="http://jsfiddle.net/jcCUs/" rel="nofollow">http://jsfiddle.net/jcCUs/</a></p>
  
  <p>Since the confirmation messages will only be displayed occasionally it doesn't seem ideal to dynamically change the Bootstrap grid layout based on the presence or absence of a message.</p>
  
  <p>Many thanks!</p>
  
  <p><strong>UPDATE:</strong> Unfortunately, a solution that requires altering the width and/or proportions of the columns (as suggested below) is not viable.  Too many other elements on the page (and website) are based on the existing 2-3-7 layout and we can't scrap the overall proportions just to integrate confirmation messages.</p>