A little Design Help

I am not sure if this is a good fit here however....

I am currently on the Web Developer track and decided I would work on my portfolio website while I work on this track. I would use any trick I learned that I didn't already consider to help round out said page.

I am using the latest JQuery and Bootstrap, I have designed my page to have a carousel of 3 of my "featured" works and then under that a collapsible view of my projects. The collapsed view should have a the project title, screenshot, and brief paragraph about the project and upon expanding it it should have a 'tag cloud' showing the "technologies used" on the project as well and a more verbose blurb about the project.

Currently on displays 769px wide it lays out alright (slight glitches in the vertical placement of objects), 1208px wide and higher it lays out perfectly. however 768px wide and below, when bootstrap stacks my columns into a single stack my "tag-cloud" should display last but because of the HTML structure it lays out right between my description paragraphs. I realize its because of how the HTML is formed unfortunately I can see another way to structure my HTML to achieve my desired result on larger displays (769px +). My first thought was to do some DOM interaction at my break point (768px) and have it remove the HTML in question and append it after the description paragraphs... that is a bit beyond me though and I feel there is a better way to structure my HTML to achieve my needs.

Any help is appreciated, here is a PEN to the project. http://codepen.io/johnweland/pen/vcmEk