Mobile layout

I’m redesigning my site at RunPee.NET. (RunPee.com is the primary site. The .net site is for tinkering with the theme.)

I’m trying to adjust my mobile layout so that images – using the Image Media Element – and text – using the Text Block – will display side by side. There is room on the screen – at least for my Galaxy S4 – but the text keeps getting pushed below the image. On the desktop it displays properly.

Here is the mobile CSS that I’m using:
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
.content, .sidebar {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
}
.avia_textblock{
margin-left:-30px;
margin-right:-30px;
}
.avia-image-container{
margin-left:-30px;
margin-right:-30px;
}
}

As an example I’m trying to get my page to layout similar to what you can see at airdroid.com – the part below the green header.

Any help you could provide would be hugely appreciated. Thanks.