在较小的屏幕上重新排序DIV

Question

如果屏幕尺寸变小，我们正在寻找解决方案，重新排序DIV。

我们的div图像是灰色和白色。

在大于1024px的屏幕尺寸上，我们使用3列布局。 如果屏幕尺寸变小，我们使用2列布局。 问题是我们必须重新排序2列布局上的div。 否则布局中断，我们没有国际象棋模式。

看看应该发生的地方：printnil.com

@media only screen and (min-width: 0px)  {
      .mix {width: 100%;}
}
 @media only screen and (min-width:568px) {
     .mix {width: 50%;}
}  

@media only screen and (min-width:1024px) {
   .mix {width: 33.333%;}
 }


<div class="mix grey">

<a href="/products/angebotsmappe">

<img src="{{ 'grey.jpg' | asset_url }}" alt="Urkundenmappe - DIN 4,95 €">

<div class="infogrey">  
<h2 class="producttitle">Urkundenmappe</h2>
<span class="price">4,95 €</span>
</div>

</a>

</div>





<div class="mix white">

<a href="/products/angebotsmappe">

<img src="{{ 'white.jpg' | asset_url }}" alt="Sammelmappe - DIN 4,95 €">

<div class="infowhite">    
<h2 class="producttitle">Sammelmappe</h2>
<span class="price">4,95 €</span>
</div>


</a>

</div>  





<div class="mix grey">

<a href="/products/angebotsmappe">

<img src="{{ 'grey.jpg' | asset_url }}" alt="Angebotsmappe - DIN 4,95 €">

<div class="infogrey">    
<h2 class="producttitle">Angebotsmappe</h2>
<span class="price">4,95 €</span>
</div>


</a>

</div>    





<div class="mix white">

<a href="/products/angebotsmappe">

<img src="{{ 'white.jpg' | asset_url }}" alt="Schnellhefter - DIN 4,95 €">

<div class="infowhite">      
<h2 class="producttitle">Schnellhefter</h2>
<span class="price">4,95 €</span>
</div>


</a>

</div>  





<div class="mix grey">

<a href="/products/angebotsmappe">

<img src="{{ 'grey.jpg' | asset_url }}" alt="Klemmmappe - DIN 4,95 €">

<div class="infogrey">        
<h2 class="producttitle">Klemmmappe</h2>
<span class="price">4,95 €</span>
</div>


</a>

</div>    





<div class="mix white">

<a href="/products/angebotsmappe">

<img src="{{ 'white.jpg' | asset_url }}" alt="Ringordner - DIN 4,95 €">

<div class="infowhite">          
<h2 class="producttitle">Ringordner</h2>
<span class="price">4,95 €</span>
</div>


</a>

</div>

也许是一个JavaScript解决方案？

Answer 1

如果您不需要支持IE8及更早版本，则可以使用CSS3 nth-child()。 css设计用于说明，将其更改为您需要的内容：

.mix
{
    float: left;
    text-align: center;
    border: 1px solid;
}

.mix img
{
    display: inline-block;    
    max-width: 50%;
}

@media only screen and (min-width:568px)
{
    .mix
    {
        width: 50%;
    }

    .mix:nth-child(4n+1), .mix:nth-child(4n+4)
    {  
        background: #999;
    }  
}

@media only screen and (min-width:1024px)
{
    .mix
    {
        width: 33.333%;
    }

    .mix:nth-child(4n+1), .mix:nth-child(4n+4)
    {  
        background: none;
    }

    .mix:nth-child(odd)
    {  
        background: #999;
    }
}

示例：http://jsfiddle.net/7h36fjnq/ - 调整窗口大小以使其正常工作。

Answer 2

我建议你使用某种响应式网格系统。 有很多现有的例子。看看这个：

http://getbootstrap.com/examples/offcanvas/

网格系统：

http://getbootstrap.com

http://foundation.zurb.com

http://www.responsivegridsystem.com

Answer 3

对于这个抱歉，有几个好的库。 Twitter引导程序是最常见/最受欢迎的，但它已经存在足够长的时间，以便其他更激进的解决方案可用。我个人最喜欢的是语义ui。您可以拥有仅在不同设备类型上可见的div，从而可以设计移动界面和不同大小的桌面界面。

Twitter引导可能是最好的选择，但语义绝对值得一看。