title: Bootstrap - 3 columns in one row, titles outside of the row
body: <p>I am making a website and the client is very specific about how he wants it.</p>
  
  <p>In one of the sections he asked me to put three columns. The first two columns must be a title with its corresponding text and the third one must be an image.
  So the only challange here for me was to make the third column adapt its height to the other two columns. But after some research and using flexbox I accomplished it. </p>
  
  <p>However, when I showed it to the client he said that he wanted the image to adapt only to the text and not to the whole column. He wants the titles of the other two columns to be outside. Since I don't know if I made myself clear, here is an image of what he wants: <a href="https://i.stack.imgur.com/tMTsm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tMTsm.jpg" alt="enter image description here"></a></p>
  
  <p>Notice how the image starts where the subtitles start. So the actual question would be: <strong>how do I place the titles "Buy" and "Sell" centered and above each column?</strong> </p>
  
  <p>Here is the code I used when I thought that the image started where the titles start:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#buy_sell main{
    padding: 50px 100px;
  }
  
  .buy_sell_photoColumn{
    background: url('../img/buy_sell_photo.jpg') center center no-repeat;
    background-size: cover;
  }
  
  .buy_sell_text h2{
    text-align: center;
    color: #0bbacf;
    margin-bottom: 20px;
  }
  
  .buy_sell_text h3{
    text-align: center;
    color: #43727c;
    font-size: 20px;
    font-family: 'AvenirNext-Regular';
  }
  
  #buy_sell .buy_sell_text p{
      color: #43727c;
      font-size: 16px;
      font-family: 'AvenirNext-Regular';
      margin-bottom: 20px;
  }
  
  .buy_sell_text p:nth-of-type(4){
    margin-bottom: 0 !important;
  }
  
  #buy_sell .buy_sell_text ul{
    color: #43727c;
      font-size: 16px;
      font-family: 'AvenirNext-Regular';
      margin-bottom: 20px;
  }
  
  #buy_sell main&gt;div{
    display: flex;
  }
  
  .buy_sell_text, .buy_sell_photoColumn{
    flex: 1;
  }
  
  .buy_sell_text ul{
    padding: 0;
  }
  
  #buy_sell .buy_sell_text ul{
    color: #43727c;
      font-size: 16px;
      font-family: 'AvenirNext-Regular';
      margin-bottom: 20px;
      list-style: none;
  
     text-indent: 2px;
     list-style-position: outside;
  }
  
  #buy_sell .sellProperty p{
    margin-bottom: 10px;
  }
  
  #buy_sell .sellProperty li{
    margin: 5px 40px;
  }
  
  #buy_sell .sellProperty li:before{
    position: absolute;
    left: 50px;
    content:"\25B6";
    font-family: fontAwesome;
    color: #00b6d0;
    font-size: 14px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main class="container-fluid"&gt;
          &lt;div class="row"&gt;
                  &lt;div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-0 col-lg-4 col-lg-offset-0 buy_sell_text textWrapper"&gt;
                      &lt;h2&gt;BUY&lt;/h2&gt;
                      &lt;h3&gt;subtitle here&lt;/h3&gt;
                      &lt;p&gt;lorem ipsum&lt;/p&gt;
  
                      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et do.&lt;/p&gt;
  
                      &lt;p&gt; et dolore magna aliqua. Ut enim ad minim veniam,
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                  consequat. Duis aute irure dolor in reprehenderit in volupta&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-0 col-lg-4 col-lg-offset-0 buy_sell_text sellProperty textWrapper"&gt;
                      &lt;h2&gt;SELL&lt;/h2&gt;
                      &lt;h3&gt;subtitle here!&lt;/h3&gt;
                      &lt;p&gt;here is what I offer:&lt;/p&gt;
  
                      &lt;ul&gt;
                          &lt;li&gt;
                              lorem ipsum
                          &lt;/li&gt;
  
                          &lt;li&gt;
                              lorem ipsum
                          &lt;/li&gt;
  
                          &lt;li&gt;
                              lorem ipsum
                          &lt;/li&gt;
  
                          &lt;li&gt;
                              Lorem ipsum
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt; 
  
                  &lt;div class="col-xs-12 col-xs-offset-0 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-4 col-lg-offset-0 buy_sell_photoColumn"&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you very much for your help!</p>