I originally put this out on The Community, but Code Questions is a better spot for it.
My goal - display a 3-column set of images on desktop as column 2 over columns 1 and 3 in mobile.

On Desktop I am setting 3 <div>'s next to each other (they could be <table>'s or <td>'s, but the closest I've been able to get to my desired effect is with <div>'s) inside of a <div>. When adjusting to mobile I want <div> #2 to "pop-up" and become 100% in width while <div>'s 1 & 3 stay on the same row and expand to 50% width each. So far I've been able to accomplish all but keeping <div>'s 1 & 3 on the same line.
My partial solution came from this blog "http://www.iandevlin.com/blog/2013/06/css/css-stacking-with-display-table".
Also, I've tried using image swap, but Outlook 2013 would not play along.
If you would, take a look at the code below and share your thoughts and/or test results for achieiving my goal, I would greatly appreciate it.
Thank you in advance for sharing your wisdom and expertise!

<style>
.boxes {width:50%; 
   margin:0 auto;}
.box {display:inline-block; 
   width:24%; 
   height:15em; 
   text-align:center; 
   line-height:15em; 
   color:#fff;} 
.one { background:#333;} 
.two {background:red; 
   color:#333;} 
.three { background:#aaa;} 
.four { background:#dc002e;}

/* 768px  */
@media only screen and (max-width:48em) { 
   .boxes {display:table; 
      width:100%;} 
   .box {display:block; 
      width:100%;} 
   .boxtop {display:inline-block; 
     width:49%;} 

   .two {display:table-caption;} 
   .four { display:table-header-group;} 
 /*  .one {display:table-footer-group;} 
   .three {display:table-footer-group;} */
   .three{float:right !important; vertical-align:top !important; display:inline-block !important;}
   .one {display:inline-block !important;}
}
</style>

<div class="boxes"> 
   <div class="one box boxtop">Box One</div> 
   <div class="two box">Box Two</div> 
   <div class="three box boxtop">Box Three</div>  
 <!--  <div class="four box">Box Four</div> -->
</div>