title: Add breakpoint to div on mobile phone
body: <p>I just discovered / started to learn media queries. Im having a rather hard time at getting used to it. Im looking for an example / some help with the following.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.col-left{
      height:300px;
      background:red; 
  }
  
  .col-right{
      height:300px;
      background:yellow;      
  }
  .icon-container{
      padding:20px 20px;
      background-color:blue;
      height:300px;
  }
  .heading-container{
      padding:20px 20px;
      background-color:black;
      height:300px;   
       font-size: 18px;
      letter-spacing: .5px;
      text-shadow: 2px 2px 8px #141415;
      font-weight: 900;
      color:white;
  }
  </code></pre>
  
  <p><strong>This is my HTML with Bootstrap</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6 col-xs-6 col-left"&gt;
              &lt;div class="row item-container"&gt;
                  &lt;div class="col-md-4 col-xs-4 icon-container"&gt;
                      &lt;i class="fa fa-usd fa-3x"&gt;&lt;/i&gt;
                  &lt;/div&gt;&lt;!--/icon-container --&gt;
                  &lt;div class="col-md-8 col-xs-8 heading-container"&gt;
                      &lt;p&gt;Loren Ipsum This is some random text&lt;/p&gt;
                  &lt;/div&gt;&lt;!--/heading-container --&gt;
              &lt;/div&gt;&lt;!--/.row item-container --&gt;
          &lt;/div&gt;&lt;!--/col6 --&gt;
  
          &lt;div class="col-md-6 col-xs-6 col-right"&gt;
          &lt;/div&gt;&lt;!--/col6 --&gt;
      &lt;/div&gt;&lt;!--/row --&gt;    
  &lt;/div&gt;&lt;!--/container --&gt;
  </code></pre>
  
  <p><strong>OUTPUT DESKTOP</strong></p>
  
  <p>The desktop output is fine and displaying as I want it to display.</p>
  
  <p><a href="https://i.stack.imgur.com/Bs9MT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bs9MT.png" alt="enter image description here"></a></p>
  
  <p><strong>Mobile Output</strong></p>
  
  <p>The problem comes in when viewing the above code on a mobile device. When viewed on mobile device I get the following output:</p>
  
  <p><a href="https://i.stack.imgur.com/UjoqD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UjoqD.png" alt="enter image description here"></a></p>
  
  <p>The above output, is WRONG as I want the viewport to break after the black heading div. I would like to get a mobile output like the following image below:</p>
  
  <p><strong>Desired Output</strong></p>
  
  <p><a href="https://i.stack.imgur.com/8VkEO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8VkEO.png" alt="enter image description here"></a></p>
  
  <p>If anyone could point me in the right direction here it would be greatly appreciated. I tried to follow the following <a href="https://www.w3schools.com/css/css_rwd_mediaqueries.asp" rel="nofollow noreferrer">tutorial via w3schools</a>, without success. </p>
  
  <p>Any help here would be appreciated.</p>