Bootstrap Grid System (уточнение строк)

Question

У меня небольшая проблема с использованием системы сетки Bootstrap для поиска объектов на моей странице.

Мне нужно найти 1 большой абзац в левой части страницы и 4 маленьких в правом. Вот фото того, как должно быть: http://joxi.ru/823avEMIJDNJDr

Мой результат: http://joxi.ru/4Ak7laDHyXPy8A

Заранее спасибо!

Вот мой код:

<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

Вы думаете о строках и столбцах неправильно ...

То, что вы хотите - это сначала разделить ваше пространство на 2 больших столбца по 50%, а затем разделить ваш второй столбец на блоки, которые займут 50% этого столбца. Вместо того, чтобы просто поставить все блоки на одном уровне, вам нужно их вложить.

<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>

Обратите внимание, что во втором col-md-6 есть четыре col-md-6. Даже если они занимают 25% от полного экрана, они занимают только 50% родительского ряда. Каждый определяемый вами столбец можно снова разбить на 12 столбцов.