Anton Yatsenyuk

для начала уберите у всех label классы сетки, их можно разместить с помощью css, для формы добавьте класс col-sm-9 (или сколько нужно)
Потом для каждого input в форме добавьте класс и для него css

.class {
float: left;
}

.class:first-child {
margin-left: 15px;
}

<div class="container">
	<div class="row">
		<div class="blue col-sm-4 col-md-4">
			
		</div>
		<div class="yellow col-sm-12 col-md-8">
			
		</div>
		<div class="red col-sm-8 col-md-8">
			
		</div>
	</div>
</div>

Для .blue в css через @media (min-width: 970px) нужно задать height.

Могут быть неточности, но они решатся через @media, а сетка такая должна быть

.block-class:before {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid black;
}