Switching Username for Title

[GamerFill]

Hey there, I've currently got a Widget on my main CMS page (the "Recent Forum Posts" widget), and I would like to move the Topic Title above each entry instead of below it, and move the poster's username/post time in place of where the title was.

Example of what I mean visually:


Above is the default setup.



Above is what I want done.


I would also like a slight break between the Username/Post Time, and the next comment. All entries look slightly crammed together, so even one extra line between every comment would be much nicer looking. Also, I'd like the Username/Post Time to be CLOSER to the comment it belongs to.


My exposure to this is almost brand-new, so I wasn't sure where to move anything. So instead, here is the entire code for the widget:

<div class="cms_widget">
	<div class="block">
		<div class="cms_widget_header">
			<h3><img alt="" src="{vb:stylevar imgdir_cms}/widget-forum.png" /> {vb:raw title}</h3>
		</div>
		<div class="cms_widget_content widget_content">
		<vb:each from="posts" key="postid" value="post">
			<div class="cms_widget_post_bit widget_post_bit">
				<div class="cms_widget_post_userinfo widget_post_userinfo">
				<vb:if condition="$post['username']!='guestuser' AND $vboptions['avatarenabled']">
					<div class="cms_widget_post_useravatar widget_post_useravatar">
						<a class="comments_member_avatar_link" href="{vb:link member, {vb:raw post}}">
						<vb:if condition="$post['avatarurl']" >
							<img src="{vb:raw post.avatarurl}" alt="{vb:raw post.username}" />
						<vb:else />
							<img src="{vb:stylevar imgdir_misc}/unknown.gif" alt="{vb:raw post.username}" />
						</vb:if>
						</a>
					</div>
				</vb:if>
				</div>
					<div class="cms_widget_post_comment<vb:if condition="!$vboptions['avatarenabled']">_noavatar</vb:if> widget_post_comment<vb:if condition="!$vboptions['avatarenabled']">_noavatar</vb:if>">
						<p class="cms_widget_post_content widget_post_content">{vb:raw post.previewtext}
						</p>
					<vb:if condition="$post['posttitle']">
						<h4 class="cms_widget_post_header widget_post_header">
						  <a href="{vb:link thread, {vb:raw post}}">{vb:raw post.posttitle}</a>
						</h4>
					<vb:else />
						<h4 class="cms_widget_post_header widget_post_header">
						  <a href="{vb:link thread, {vb:raw post}}">{vb:raw post.title}</a>
						</h4>
					</vb:if>
					<vb:if condition="$post['username'] == 'guestuser'">
						{vb:raw post.username}
					<vb:else />
						<a href="{vb:link member, {vb:raw post}, null, 'userid', 'username'}">{vb:raw post.username}</a>
					</vb:if>
					{vb:raw post.date}<vb:if condition="!$show['detailedtime']">, <span class="time">{vb:raw post.time}</span></vb:if>
							<a href="{vb:raw post.url}">
							<img src="{vb:stylevar imgdir_button}/lastpost-{vb:stylevar right}.png" alt="{vb:rawphrase go_to_last_post}" />
							</a>
					</div>
					<vb:comment>
					<div class="cms_widget_views">{vb:raw post.replycount}&nbsp;{vb:rawphrase replies}</div>
					</vb:comment>
			</div>
		</vb:each>
		</div>
	</div>
</div>

Thanks a trillion to whoever is willing to help me out!