Footer columns alignment issue Bootstrap 3

Question

I am training myself with Bootstrap but I have problem with separating the footer content from my PSD file. I would like the footer to be the same as the picture that I will attach here but I have some problems understanding the structure of the grid to accomplish the task. Here is example of how it should be

And here is my code until this moment

/* Main -> Footer CSS Styles */

.about-luma { margin: 58px 0 16px 0; }

.item h3 { font-family: "Raleway-Regular", sans-serif; font-size: 18px;  margin-bottom: 36px; letter-spacing: 0.7px; } 
.item ul { list-style: none; }
.item ul li { display: block; }
.item ul li a { text-decoration: none; font-family: "Raleway", sans-serif; font-size: 16px; color: #909090; line-height: 36px; letter-spacing: 0.7px; }
.item ul li a:hover { color: #8bc541; }

.latest-items { float: left; position: relative; top: 11px; }

.text { padding: 0 4px; font-size:15px; }
.latest-image {  margin-bottom: 30px; display: block; width: 68px; }
.latest-image { max-width: 100%; height: auto; }

.btn-arrow { float: left; display: inline-block; margin: 11px 14px 0 0; background: url(../images/arrow.png) 0 0 no-repeat; width: 11px; height: 11px; }

.footer { clear: both; background: #000; }
.copyrights { text-align: center; padding: 56px 0 0 0; border-top: 1px solid #252525; }
.copyrights p { color: #909090; font-family: "Raleway-Regular", sans-serif; font-size: 16px; padding: 0 10px; }
.copyrights a { color: #909090; text-decoration: none; letter-spacing: 0.3px; }
.copyrights a:hover { color: #8bc541; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="footer">
  <div class="contact-information">
    <div class="container">
      <div class="about-luma">
        <div class="col-md-4">
          <div class="row">
            <div class="item">
              <h3>Find Appliances</h3>
              <ul>
                <li><span class="btn-arrow"></span><a href="#">Products</a></li>
                <li><span class="btn-arrow"></span><a href="#">Product Videos</a></li>
                <li><span class="btn-arrow"></span><a href="#">Product Knowledge Base</a></li>
                <li><span class="btn-arrow"></span><a href="#">Where to Buy</a></li>
              </ul>
            </div><!-- item -->
          </div><!-- row -->
        </div><!-- col-md-4 -->
        <div class="row">
          <div class="col-md-4">
            <div class="item">
              <h3>About Luma Comfort</h3>
              <ul>
                <li><span class="btn-arrow"></span><a href="#">About Us</a></li>
                <li><span class="btn-arrow"></span><a href="#">Press</a></li>
                <li><span class="btn-arrow"></span><a href="#">Privacy Policy</a></li>
                <li><span class="btn-arrow"></span><a href="#">Terms of Use</a></li>
              </ul>
            </div><!-- item -->
          </div><!-- col-md-4 -->
        </div><!-- row -->
        <div class="row">
          <div class="col-md-4">
            <div class="item">
              <h3>Latest Posts</h3>
              <div class="latest-items">
                <a href="#"><img src="https://s13.postimg.org/8o0ba1vyr/documents.jpg" width="68" height="68" title="someText" alt="someText" class="latest-image img-responsive"></a>
                <a href="#"><img src="https://s13.postimg.org/vgjbpvitv/temperature.jpg" width="68" height="68" title="someText" alt="someText" class="latest-image img-responsive"></a>
                <a href="#"><img src="https://s13.postimg.org/fsi4j3383/product_sm_5.jpg" width="68" height="68" title="someText" alt="someText" class="latest-image img-responsive"></a>
                <a href="#"><img src="https://s13.postimg.org/yyvbm9jpv/product_sm_6.jpgg" width="68" height="68" title="someText" alt="someText" class="latest-image img-responsive"></a>
              </div>
            </div><!-- item -->
          </div><!-- col-md-4 -->
        </div><!-- row -->

      </div><!-- about-luma -->
      <div class="contacts">
        <div class="row">
          <div class="col-md-4">
            <div class="item">
              <h3>Customer Care</h3>
              <ul>
                <li><span class="btn-arrow"></span><a href="#">Contact Us</a></li>
                <li><span class="btn-arrow"></span><a href="#">Product Support</a></li>
                <li><span class="btn-arrow"></span><a href="#">Become a Dealer</a></li>
                <li><span class="btn-arrow"></span><a href="#">Blog</a></li>
              </ul>
            </div><!-- item -->
          </div><!-- col-md-4 -->
        </div><!-- row -->

        <div class="row">
          <div class="col-md-4">
            <div class="item">
              <h3>Connect with Luma Comfort</h3>
              <ul>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Youtube</a></li>
              </ul>
            </div><!-- item -->
          </div><!-- col-md-4 -->
        </div><!-- row -->
      </div><!-- contacts -->
      <div class="row">
        <div class="col-md-12">
          <div class="copyrights">
            <p>&copy; 2015 <a href="#" target="_blank">lumacomfort.com</a></p>
          </div><!--copyrights -->
        </div>
      </div>
    </div><!-- container -->
  </div><!-- contact-info -->
</footer><!-- footer -->

Any suggestions or simple explanations where is my mistake ?

Answer 1

You need to nest rows and columns using bootstrap grid. Here's what I came up with just to let you know how it works. Fiddle here.

<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <div class="row">
          <div class="col-md-6">
            <h5>One</h5>
            <ul>
              <li>Lorem ipsum dolor sit.</li>
              <li>Lorem ipsum dolor sit.</li>
              <li>Lorem ipsum dolor sit.</li>
              <li>Lorem ipsum dolor sit.</li>
            </ul>
          </div>
          <div class="col-md-6">
             <h5>Two</h5>
            <ul>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
            </ul>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <h5>Three</h5>
            <ul>
              <li>Lorem ipsum dolor sit.</li>
              <li>Lorem ipsum dolor sit.</li>
              <li>Lorem ipsum dolor sit.</li>
              <li>Lorem ipsum dolor sit.</li>
            </ul>
          </div>
          <div class="col-md-6">
             <h5>Four</h5>
            <ul>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum dolor.</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <h5>Latest Posts</h5>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis eius cumque veritatis illum! Perspiciatis voluptates repellendus blanditiis porro, eos unde!
      </div>
    </div>
    <hr>
    <div class="sub-footer text-center">
      &copy; 2016 Sample
    </div>
  </div>
</footer>

CSS:

.footer {
  background: #000;
  color: #fff;
}

.sub-footer {
  margin-bottom: 10px;
}

Answer 2

In my view, this is how you should design the layout.

<section class="footer-widgets-area">
    <div class="container">
        <div class="row">
            <!-- this is your left div with 4 widgets -->
            <div class="col-md-8">
                <!-- first row with 2 widets  -->
                <div class="row">
                    <div class="col-md-6">
                        <!-- Find Applianceds  -->
                    </div>
                    <div class="col-md-6">
                        <!-- About Luma Comfort -->
                    </div>
                </div>
                <!-- second row to avoid overlapping and displacement due to columns above -->
                <div class="row">
                    <div class="col-md-6">
                        <!-- Customer Care -->
                    </div>
                    <div class="col-md-6">
                        <!-- Connect with Luma Comfort -->
                    </div>
                </div>
            </div>
            <!-- this is your right col with gallery widget -->
            <div class="col-md-4">
                <!-- Latest Posts -->
            </div>
        </div>
        <!-- for copyright area -->
    </div>
</section>
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <!-- copyright -->
            </div>
        </div>
    </div>
</footer>