. Для блока где слайдер задайте margin-top: -50px <div class="col-12"></div><div class="row">
<div class="col-auto">
<a href="#" class="button button_right">Скачать</a>
</div>
<div class="col-auto">
<a href="#" class="button">Подробности</a>
</div>
</div>.blue, .red, .green, .grey, .yellow {height: 150px;}
.blue {background: blue;}
.red {background: red;}
.green {background: green; height: 300px;}
.grey {background: grey;}
.yellow {background: yellow;}<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-12 blue">синий блок</div>
<div class="clearfix"></div>
<div class="col-sm-12 red">красный блок</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-sm-12 green">зеленый блок</div>
<div class="clearfix"></div>
<div class="col-sm-12 grey">серый блок</div>
<div class="clearfix"></div>
<div class="col-sm-12 yellow">желтый блок</div>
</div>
</div>
</div><div class="container">
<div class="row">
<div class="col">
</div>
</div>
</div>@media (min-width: 1200px)
.container {
max-width: 1140px;
}<div class="section">
<div class="container">
<div class="section-description">
<h1>Description</h1>
<img src="http://cdn.iphonehacks.com/wp-content/uploads/2013/09/iphone_5c_ios_7.png" alt="image" />
</div>
</div>
</div>body{
padding: 0;
margin: 0;
}
.section {
position: relative;
background-color: lightblue;
overflow: hidden;
min-height: 100vh;
}
.section::after{
content: "";
position: absolute;
top: 0;
right: -80%;
width: 100%;
height: 100%;
background-color: white;
transform: skew(45deg);
}
.section .container{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.wrapper{
width: 100%;
min-height: 100vh;
position: relative;
}
.wrapper::before{
content: '';
display: block;
background: #3591d0;
position: absolute;
height: 100%;
width: 50%;
top: 0;
left: 0;
bottom: 0;
}
.wrapper::after{
content: '';
display: block;
background: #fff;
position: absolute;
height: 100%;
width: 50%;
top: 0;
right: 0;
bottom: 0;
}<section class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
Левая часть
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
Правая часть
</div>
</div>
</div>
</section><div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
текст который сверху
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
текст который снизу слева
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
картинка справа снизу
</div>
</div>
</div>