The answer is a combination of CSS and page layouts.
Ideally, you'll set up your page layout and just leave any unused or unneeded Web Part Zones empty and their columns will collapse automatically. The below is an example of that.
<style>
<!--style code for Web Part Zones/columns -->
<!--Ideally this will go in your page layout's CSS file rather than on your page layout itself -->
.Left2Col{
float:left;
width:33%;
}
.Center2Col{
float:left;
width:33%;
}
.Right2Col{
float:right;
width:33%;
}
</style>
<!-- This table section goes into the body element of your page layout -->
<table id="TriColTable" style="width:100%">
<tr id="TriColTrL" style="width:100%">
<td id="TriColTd1" valign="top" class="Left2Col">
<div id="SpWpContent" class="SpWpContent">
<div data-name="WebPartZone">
<!-- Insert a web part zone here -->
</div>
</div>
</td>
<td id="TriColTd2" valign="top" class="Center2Col">
<div data-name="WebPartZone">
<!-- Insert a web part zone here -->
</div>
</td>
<td id="TriColTd3" valign="top" class="Right2Col">
<div data-name="WebPartZone">
<!-- Insert a web part zone here -->
</div>
</td>
</tr>
</table>
If you only have access to the front end (namely you don't have rights to create page layouts and can't convince an admin), you can use a script editor web part to add CSS that manually manipulates the images and text boxes through CSS. This is more than just a bit messy though.