Bootstrap - 4-х столбчатая сетка

Question

Я не могу получить эти строки на странице. Я всегда разделяю страницы на две горизонтальные секции, и мне нужны четыре вертикальные секции.

Вот картина: :

Вот скрипка моего кода, который вы можете легко знать, что я хочу FIDDLE.

Мне нужно только, чтобы средний контент был как на картинке. 4 вертикальных столбца и в этих столбцах у меня есть 2 блока.

Вот моя попытка:

<div class="col-md-12"> 
<div class="pane border-right"> 
<div> 
<div style="float: left;"> 
</div> 
</div> 
<div class="col-md-6 specifica "> 
<div class="col-sm-3 border-right-dotted"> 

a 

</div> 
<div class="col-sm-3 border-right-dotted"> 

b 

</div> 

</div> 
<div class="col-md-3 specifica "> 
<div class="col-sm-3 border-right-dotted"> 

c 

</div> 
<div class="col-sm-3 "> 

d 

</div> 
</div> 

Answer 1

С помощью этого кода вы можете создать 2 строки с 4-мя колоннами, как на картинке, пример: http://jsfiddle.net/ignaciocorreia/rc2E7/1/

<div class="row"> 
    <div class="col-sm-3 col-md-3">a</div> 
    <div class="col-sm-3 col-md-3">b</div> 
    <div class="col-sm-3 col-md-3">c</div> 
    <div class="col-sm-3 col-md-3">d</div> 
</div> 

---- 

<div class="row"> 
    <div class="col-sm-3 col-md-3">a</div> 
    <div class="col-sm-3 col-md-3">b</div> 
    <div class="col-sm-3 col-md-3">c</div> 
    <div class="col-sm-3 col-md-3">d</div> 
</div> 

EDIT - 07-04-2017

С Boostrap 4 и flex box все меняется до:

<div class="row"> 
    <div class="col">1</div> 
    <div class="col">2</div> 
    <div class="col">3</div> 
    <div class="col">4</div> 
</div> 

Рабочий пример: https://codepen.io/igcorreia/pen/jBjbQP