如何使这个块元素？

Question

下面的代码就像一张桌子一样完美。当我缩小页面时，我希望它首先命名 - 首先是foo，然后是最后一个名称 - 最后。我被困在这里。我知道我需要在这里只使用“@media ”屏幕和（最大宽度：760px）， （最小设备宽度：768px）和（最大设备宽度：1024px）。但之后我迷路了。提前致谢。

<div id="Main"> 
    <section id="sub"> 
     <div>First Name</div> 
     <div>Last Name</div> 
     <div>Middle Name</div> 
    </section> 
    <section id="sub2"> 
     <div>foo first</div> 
     <div>foo Last</div> 
     <div>foo Middle</div> 
    </section> 
</div> 

Answer 1

你可以像下面那样修改你的HTML。使所有的div元素左右浮动，固定宽度为49％或50％。当它有空间时，它会并排浮动，而当没有足够的空间可以在侧面浮动时，第二个div将会卷起来。媒体查询可能不需要在这种情况下，除非它是你的设计约束。

Css here： ＃主要部分div {float：left;宽度：50％;} HTML这里：

<div id="Main"> 
    <section id="sub"> 
     <div>First Name</div> 
     <div>foo first</div> 
    </section> 
    <section id="sub1"> 
     <div>Last Name</div> 
     <div>foo Last</div> 
    </section> 
    <section id="sub2"> 
     <div>Middle Name</div> 
     <div>foo Middle</div> 
    </section> 
</div>