Bootstrap - 4 column grid

Question

I can not get thet rows on the page. I'm always page halved into two horizontal section and I want four vertical sections.

Here is PICTURE: :

Here is fiddle of my code that you can easy know that what I want FIDDLE.

I only need that middle content to be like on picture.. 4 vertical columns and in that columns that i have 2 blocks.

Here is my try :

<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

With this code you can create 2 rows with 4 columns like the picture, example: 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

With Boostrap 4 and flex box things change to:

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

Working example: https://codepen.io/igcorreia/pen/jBjbQP