Bootstrap Grid System (rows clarification)

Question

I've got a small problem using Bootstrap grid system to locate objects on my page.

I need to locate 1 big paragraph on the left side of the page, and 4 small on the right one. Here is a photo of how it should be: http://joxi.ru/823avEMIJDNJDr

My result is: http://joxi.ru/4Ak7laDHyXPy8A

Thank you in advance!

Here is my code:

<div class="container secondBlock">

    <div class="row align-items-center">
    <div class="col-md-6">

        <h1 align="left"><span style="font-weight: bold">DO YOU KNOW WHAT WE CAN PROVIDE TO YOU?</span></h1>
        <br>
        <p align="left">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 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 voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <br>
        <button type="button" class="btn btn-danger pull-left" ><span stye=text-align: left>Contact Us</span></button>
</div> <!-- End of container (col-md-6) -->

    <div class="col-sm-3">
        <span class="glyphicon glyphicon-cog"></span>
        <h3>Management</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>  

    <div class="col-sm-3">
        <span class="glyphicon glyphicon-pencil"></span>
        <h3>UI/UX Design</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

     <div class="row">
    <div class="col-sm-3">
        <span class="fa fa-diamond"></span>
        <h3>Logo/Branding</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>  

    <div class="col-sm-3">
        <span class="fa fa-truck"></span>
        <h3>Animation</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>  
</div>
<div>

</div> <!-- End of second big white container -->

Answer 1

You're thinking of rows and columns the wrong way...

What you want is to first split your space in 2 big 50% columns, and then split your second column into blocks that will take up 50% of that column. Instead of just putting all the blocks at the same level, you need to nest them.

<div class="row">
  <div class="col-md-6>Your big column content</div>
  <div class="col-md-6>
     <div class="row">
          <div class="col-md-6>Block 1</div>
          <div class="col-md-6>Block 1</div>
          <div class="col-md-6>Block 1</div>
          <div class="col-md-6>Block 1</div>
     </div>
   </div>
</div>

Note that within the 2nd col-md-6 , there are four col-md-6 . Even though they take up 25% of the full screen, they only take up 50% of their parent row. Each col you define can again be split into 12 columns.