<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.flex {
display: flex;
flex-direction: column;
}
.flex1 {
order: 3;
}
.flex2 {
order: 1;
}
.flex3 {
order: 2;
}
.flex4 {
order: 4;
}
@media screen and (min-width:1000px) {
.flex {
display: inline;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-3">
<input name="textinput" type="text" placeholder="1" class="form-control" />
<input name="textinput" type="text" placeholder="2" class="form-control" />
<input name="textinput" type="text" placeholder="3" class="form-control" />
<input name="textinput" type="text" placeholder="4" class="form-control" />
<input name="textinput" type="text" placeholder="5" class="form-control" />
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<input name="textinput" type="text" placeholder="6" class="form-control" />
<input name="textinput" type="text" placeholder="7" class="form-control" />
<input name="textinput" type="text" placeholder="8" class="form-control" />
<input name="textinput" type="text" placeholder="9" class="form-control" />
</div>
<div class="col-md-6">
<input name="textinput" type="text" placeholder="10" class="form-control" />
<input name="textinput" type="text" placeholder="11" class="form-control" />
<input name="textinput" type="text" placeholder="12" class="form-control" />
<input name="textinput" type="text" placeholder="13" class="form-control" />
</div>
</div>
</div>
<div class="col-md-3">
<input name="textinput" type="text" placeholder="14" class="form-control" />
<input name="textinput" type="text" placeholder="15" class="form-control" />
<input name="textinput" type="text" placeholder="16" class="form-control" />
</div>
<span class='flex'>
<div class="col-md-3 flex1">
<input name="textinput" type="text" placeholder="17 - Error Text Area" class="form-control" />
</div>
<div class="col-md-3 flex2">
<input name="textinput" type="text" placeholder="18" class="form-control" />
</div>
<div class="col-md-3 flex3">
<input name="textinput" type="text" placeholder="19" class="form-control" />
</div>
<div class="col-md-3 flex4">
<input name="textinput" type="text" placeholder="20 - Button" class="form-control" />
</div>
</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
// Code goes here
/* Styles go here */