Keeping lists from wrapping around image - css

Question

I'm trying to keep a couple of lists aligned to the left with some text and un-wrapping around an image on desktop/tablet and mobile but don't seem to be making a lot of progress.
Here's the Codepen: http://codepen.io/carlos_serrano/pen/ikjeg
and here the code for what I have so far:
HTML:
<div class="content">
<img src="any 100x 100 image.gif">
<h3>Heading</h3>
<p>Just random text here.</p>
</div>
<div class="linkcontainer">
<div class="linkleft">
<ul>
<li>Left Item 1</li>
<li>Left Item 2</li>
<li>Left Item 3</li>
</ul>
</div>
<div class="linkright">
<ul>
<li>Right Item 1</li>
<li>Right Item 2</li>
<li>Right Item 3</ul>
</div>
Here's the CSS:
p{
overflow: hidden;
}
img{
float:left;
margin: 0 25px;
}
.linkcontainer {
width: 50%;
padding-bottom: 25px;
clear: both;
}
.linkleft, .linkright {
width: 100%;
float: right;
}
#media only screen and (min-width: 481px) {
.linkleft, .linkright {
display: inline-block;
width: 30%;
float: left;
}
}

Answer 1

Ok, if I understood your question (and clarification in your comment) correctly, this is what you need to do:
First, move the heading and the text into the linkcontainer:
<div class="content">
<img src="http://www.labyrinth.net.au/~toonist/flash_goodies/graphics/image_sizes/rotate_circle_100.gif" />
</div>
<div class="linkcontainer">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident deserunt architecto quasi quaerat cupiditate quis harum ipsum ipsa veritatis suscipit iure velit asperiores ipsam vitae reiciendis quos aliquam doloribus repellendus.</p>
<div class="linkleft">
<!-- ... -->
</div>
</div>
Then ensure content and linkcontainer are both floated left:
.content {
float:left;
margin:0 25px
}
.linkcontainer {
float:left;
padding-bottom: 25px;
}
I updated your pen: http://codepen.io/anon/pen/aAiqj
EDIT: Upon further clarification, there is a better solution that will help prevent wrapping the heading, text and menus on smaller screens: make sure you wrap the 2 main divs into a wrapper div and set the width of this one to the total of the inner divs (plus margins).
#wrapper {
width: 750px
}
.content {
float: left;
margin: 0 25px;
width: 200px;
}
.linkcontainer {
float: left;
padding-bottom: 25px;
width: 500px;
}
<div id="wrapper">
<div class="content">
<img src="http://www.labyrinth.net.au/~toonist/flash_goodies/graphics/image_sizes/rotate_circle_100.gif">
</div>
<div class="linkcontainer">
<!-- ... -->
</div>
</div>
Here is your newest pen: http://codepen.io/anon/pen/hJbmr