css - 使用三列更改 Foundation 上的顺序

Question

我正在尝试在 Foundation 中实现以下布局。我应该使用哪些推拉类来使最后一列在桌面上超过一列？

      <div class="row">
         <div class="small-12 column large-10">
          First on mobile, First on desktop
          </div>
         <div class="small-12 large-12 column">
         Second on mobile, Third on desktop
         </div>
         <div class="small-12 column large-2>
         Third on mobile, Second on desktop
        </div>
     </div>

Answer 1

首先，您的示例中存在一些语法错误。其次，当它应该是 columns 时，您拥有类 column。

 <div class="row">
     <div class="small-12 columns large-10">
      First on mobile, First on desktop
      </div>
     <div class="small-12 large-12 columns">
     Second on mobile, Third on desktop
     </div>
     <div class="small-12 columns large-2">
     Third on mobile, Second on desktop
    </div>
 </div>

此外，如果每行 12 列，我认为您不能推/拉任何 12 列。我会通过隐藏/显示第二个/第三个元素来做一些变通。类似下面的内容。

 <div class="row">
     <div class="small-12 columns large-10">
      First on mobile, First on desktop
      </div>
     <div class="small-12 columns large-2 show-for-large-up">
     Third on mobile, Second on desktop
    </div>                    
     <div class="small-12 large-12 columns">
     Second on mobile, Third on desktop
     </div>
     <div class="small-12 columns large-2 show-for-medium-down">
     Third on mobile, Second on desktop
    </div>                             
 </div>

也许有一种我不知道的通过基础重新排序 html 的优雅方法。但在您找到更具体的东西之前，我会将其用作临时修复。