Align image below text - html

Question

How can I align an image below text, without the image going to the right of the text?
I'm using flexbox to display the icons/links in columns. But below that, I want the image to be centered below the paragraph of text.
I have tried using clear but no change.
a:link {
color: black;
background-color: transparent;
text-decoration: none;
font-size: 75%;
}
a:visited {
color: black;
background-color: transparent;
text-decoration: none;
font-size: 75%;
}
a:hover {
color: #9700bd;
background-color: transparent;
text-decoration: underline;
font-size: 75%;
}
a:active {
color: #9700bd;
background-color: transparent;
text-decoration: none;
font-size: 75%;
}
footer ul {
list-style: none;
text-align: center;
}
footer div div {
margin: 0 auto;
display: inline-block;
}
footer > div {
/*margin-left: 25%;*/
display: flex;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<footer>
<div>
<div>
<ul>
<li><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</li>
<li><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</li>
<li><i class="fa fa-instagram" aria-hidden="true"></i> Instagram</li>
<li><i class="fa fa-vine" aria-hidden="true"></i> Vine</li>
</ul>
</div>
<div>
<ul>
<li><i class="fa fa-youtube-play" aria-hidden="true"></i> YouTube</li>
<li><i class="fa fa-twitch" aria-hidden="true"></i> Twitch</li>
<li><i class="fa fa-soundcloud" aria-hidden="true"></i> SoundCloud</li>
<li><i class="fa fa-reddit-alien" aria-hidden="true"></i> Reddit</li>
</ul>
</div>
<div>
<ul>
<li><i class="fa fa-github" aria-hidden="true"></i> GitHub</li>
<li><i class="fa fa-stack-overflow" aria-hidden="true"></i> Stack Overflow</li>
<li><i class="fa fa-jsfiddle" aria-hidden="true"></i> JSFiddle</li>
</ul>
</div>
</div>
<hr>
<div class="footer">
<p class="footer" style="clear: right;">Oh, hello there. My name is Java. No, not the programming language! Well, this is awkward. Not much else to be said... uhm... enjoy your stay, I guess!</p>
<a href="http://itzjavacraft.tk">
<img src="/images/logo.png" alt="ItzJavaCraft" class="footer" />
</a>
</div>
</footer>
Here's a JSFiddle

Answer 1

The quickest solution I can think of is to apply Flexbox only to the <div> that contains your icons/links. That way, the <div> below will remain "un-flexed" and will stack as you expect:
footer {
text-align: center;
}
#footer_links {
display: flex;
}
#footer_links div {
margin: 0 auto;
display: inline-block;
}
#footer_links ul {
list-style: none;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<footer>
<div id="footer_links">
<div>
<ul>
<li><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</li>
<li><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</li>
<li><i class="fa fa-instagram" aria-hidden="true"></i> Instagram</li>
<li><i class="fa fa-vine" aria-hidden="true"></i> Vine</li>
</ul>
</div>
<div>
<ul>
<li><i class="fa fa-youtube-play" aria-hidden="true"></i> YouTube</li>
<li><i class="fa fa-twitch" aria-hidden="true"></i> Twitch</li>
<li><i class="fa fa-soundcloud" aria-hidden="true"></i> SoundCloud</li>
<li><i class="fa fa-reddit-alien" aria-hidden="true"></i> Reddit</li>
</ul>
</div>
<div>
<ul>
<li><i class="fa fa-github" aria-hidden="true"></i> GitHub</li>
<li><i class="fa fa-stack-overflow" aria-hidden="true"></i> Stack Overflow</li>
<li><i class="fa fa-jsfiddle" aria-hidden="true"></i> JSFiddle</li>
</ul>
</div>
</div>
<hr>
<div>
<p>Oh, hello there. My name is Java. No, not the programming language! Well, this is awkward. Not much else to be said... uhm... enjoy your stay, I guess!</p>
<a href="http://itzjavacraft.tk">
<img src="/images/logo.png" alt="ItzJavaCraft" />
</a>
</div>
</footer>