重新排列移动设备的 div 顺序

Question

在我的website，我已经修复了桌面的布局，看起来不错（这只是我的意见哈哈）。喊话框位于两个元素之间，这就是我想要的。但是，当我使用 iPad 时，我希望喊话框位于“最近的线程”和“通知”元素下方，宽度为 100%。单独使用 CSS 和 HTML 是否可行？如果是这样，我该怎么做？

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>

抱歉，这段代码看起来太糟糕了。我不太担心组织。

Answer 1

css代码有问题，你有未封闭的cmets /*框和两个不同的样式标签，可能只有一个，你可以重写它，这样更容易看到和理解

Answer 2

您正在尝试实现 flexbox 方法，但您的实现不正确。将<div class="flex-box-container"> 包裹在三个 div 周围并使用此 CSS 代码。

@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

问题已解决！我只是在聊天元素上使用了display: hide，然后我创建了一个新元素，chat-mo，专为移动设备设计。我将display: hide 用于桌面浏览器，因此它只对移动设备可见。不过，感谢您的回答：D