如何使這個塊元素？

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>