Rearrange div order for mobile

Question

On my website, I have fixed the layout for desktop, and it looks good (that's just my opinion haha). The shoutbox is centered between two elements, which is how I want it. But, when I use my iPad, I want the shoutbox to be under the Recent Threads and Notice elements at 100% width. Is this possible with CSS and HTML alone? If so, how would I do it?

HTML:

<div align="center" style="width: 100%;">
    <div id="ad_recent_wrapper" style="margin-left: 70px; background-color: #333333; float: left;" align="center">
        <div id="recent" style=""></div>
    </div>
    <div class="box" style="width: 300px; height: 320px; margin-right: 70px; background-color: #3e3e3e; float: right;" align="center">
         <h2>Notice!</h2>

        <p style="width: 90%; margin-bottom: 14%;">The site is being worked on, so it may not look too pretty. Everything still functions properly, so applications will still be accepted! Expect to see a beautiful, clean-looking site when it's done! Happy roleplaying!</p>
        <!-- data banner code begin -->
        <div style="margin: 0px auto; bottom: 5px; background-color: #585757; width: 90%; height: 20px; min-height: 40px; padding-top: 10px; padding-bottom: 27px;"> <a href="http://alphawolf.gotop100.com/in.php?ref=2089" target="_blank">
                    <img src="http://alphawolf.gotop100.com/lists/alphawolf/custombanners/19991.png" border="0" alt="Top 50 Wolf RPG">
                        </a><a href="http://www.toprpsites.com/"><img src="http://www.toprpsites.com/images/extra/button3.jpg" alt="Top RP Sites"></a> 
            <img src="http://www.toprpsites.com/button.php?u=Shade&amp;buttontype=text" alt="Top RP Sites" border="0" style="display: none; margin: 0px auto" width="1px" height="1px">
            <p class="vote" style="margin-top: -11%"><font style="color: white">^ Click to vote! ^</font>
            </p>
        </div>
        <!-- data banner code end -->
    </div>
    <div class="chat" align="center" style="margin:0 right-floated-width 0 left-floated-width; width: 900px; height 800px;">
        <p>
            <div>$[shoutbox]</div>
        </p>
    </div>

CSS:

<style> .box h2 {
    background-color: #3e3e3e;
    height: 30px;
    background: #333333;
    color: white;
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    width: 500px;
}
.box p {
    color:#FfFfFF;
    padding-top: 40px;
}
/*.box {
                        -moz-border-radius-topright:5px;
                        -moz-border-radius-topleft:5px;
                        -webkit-border-top-right-radius:5px;
                        -webkit-border-top-left-radius:5px;
                        border-top-left-radius:5px;
                        border-top-right-radius:5px;
                    }
                </style>
<style>       
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  
{ 
  #ad_recent_wrapper {
    order: 1;
    margin-left: 5px;
    background-color: #333333; 
    float: left;
  }
  .box {
    order: 2;
    width: 300px; 
    height: 320px; 
    margin-right: 20px; 
    background-color: #3e3e3e;
    float: right;     
  }
  .chat {
    order: 3;
    margin: 0px auto;
    width: 90%; 
    height 800px;
  }

}

</style>

Sorry this code looks so terrible. I'm not too worried about organization.

Answer 1

having problem with the css code, u have unclosed comments /* box and two different style tags , which possible to be only one, can you rewrite it, so easier to see and understand

Answer 2

You are trying to implement flexbox method but your implementation is incorrect. Wrap a <div class="flex-box-container"> around the three divs and use this CSS code.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

  .flex-box-container {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center;
  }

  #ad_recent_wrapper {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;

  }
  .box {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;

  }
  .chat {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }
}

Answer 3

Problem resolved! I simply used display: hide on the chat element, then I created a new element, chat-mo, designed for mobile devices. I used display: hide for the desktop browser, so it would be visible only to mobile. Thanks for your answers, though :D