You need to set the content section up as 4 columns:
<div class="column noMargin">
<div>
<img src="_images/calculating.jpg" alt="" id="pic"/>
<p>Services</p>
<p>Simmons Gainsford LLP offers a range of services</p>
<p>Find out more</p>
</div>
<div style="border:solid black 1px;">
This is the content for Layout Div Tag "div8"
</div>
</div>
<!-- end column -->
<div class="column">
<div><img src="_images/document.jpg" alt="" id="pic"/>
<p>Case Studies</p>
<p>Examples of some projects we have been involved with</p>
<p>Find out more</p>
</div>
<div style="border:solid black 1px;">
This is the content for Layout Div Tag "div11"
</div>
</div>
<!-- end column -->
<div class="column deleteMargin">
<div><img src="_images/calculator.jpg" alt="" id="pic"/>
<p>Interactive Tools</p>
<p>Use our website to access a host of useful features</p>
<p>Find out more</p>
</div>
</div>
<!-- end column -->
<div class="column">
<div style="border:solid red 1px;">
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the </p>
</div>
</div>
<!-- end column -->
Then style them with the css below:
<style>
.column {
float: left;
width: 23.5%;
margin-left: 2%;
}
.noMargin {
margin-left: 0;
}
@media screen and (max-width: 480px) {
.column {
float: left;
width: 48%;
margin-left: 4%;
}
.noMargin {
margin-left: 0;
}
.deleteMargin {
margin-left: 0;
}
}
</style>