更改DIV为了

Question

这里有我想要的YUI纯CSS做较小的宽度屏幕上的图像：

我的HTML是相当直截了当：

<div class="pure-g"> 
    <div class="pure-u-1 pure-u-sm-1-2"> 

     <div class="pure-g"> 
      <div class="pure-u-1> 
       A 
      </div> 
     </div> 

     <div class="pure-g"> 
      <div class="pure-u-1> 
       B 
      </div> 
     </div> 

     <div class="pure-g"> 
      <div class="pure-u-1> 
       C 
      </div> 
     </div> 

    </div> 
    <div class="pure-u-1 pure-u-sm-1-2"> 

     <div class="pure-g"> 
      <div class="pure-u-1> 
       D 
      </div> 
     </div> 

     <div class="pure-g"> 
      <div class="pure-u-1> 
       E 
      </div> 
     </div> 

     <div class="pure-g"> 
      <div class="pure-u-1> 
       F 
      </div> 
     </div> 

    </div> 
</div> 

有没有办法做到这一点只是YUI纯CSS或我需要使用JQuery/Javascript？

Answer 1

当然，使A，B和C向左浮动，D，E和F以更大的屏幕宽度向右浮动。但是他们必须从“纯粹的纯粹的 - 纯粹的 - 1-2”的分裂中解脱出来。