Zurb Foundation 소스 주문 클래스의 간단한 예제

Foundation 5 (*-push-* 및 *-pull-*)의 소스 주문 클래스 사용법에 대한 정보가 누락되었습니다. 필자의 이해와 이해 사이의 차이를 설명하기 위해 JSfiddle을 만들었습니다. 그대로 세계입니다. here Zurb Foundation 소스 주문 클래스의 간단한 예제

사례가 매우 간단합니다. 두 행이있는 행이 있습니다. 대형 뷰포트에서는 너비가 나란히있는 6 개의 열을 나란히 배치해야합니다. 작은 뷰포트에서 두 번째 열이 첫 번째 열 위에 오도록 너비가 각각 12 개의 열로 쌓여 있어야합니다. 내가 무엇을 얻을

[ A ][ B ] --resize--> [ B ] 
         [ A ]

여기

[ A ][ B ] --resize--> ____[ A ] 
         [ B ]____

입니다 내가 this question을 본 코드를 다시

<body> 
    <div class="row "> 
     <div class="large-6 small-12 small-push-6 columns large-reset-order"> 
      <p>A: On large screens, I should be the first element in the row, taking up half the grid, i.e. 6 columns</p> 
      <p>Then again, on small screens I should be the second element.</p> 
     </div> 
     <div class="large-6 small-12 small-pull-6 columns large-reset-order"> 
      <p>B: On large screens, I should be the second element in the row, i.e. 6 columns</p> 
      <p>Of course, on small screens, I should show up first!</p> 
     </div> 
    </div> 
</body>

입니다하지만 난 그게 내 대답을 생각하지 않습니다. 첫째, push-12를 사용하지 않기 때문에 정의 된 클래스가 있습니다. 둘째, 난 무엇을 내 혼란, 외모를하고는 Foundation docs

출처

2014-07-24 Ben

<body> 
    <div class="row "> 
     <div class="large-6 small-12 large-push-6 columns "> 
      <p>A: On large screens, I should be the first element in the row, taking up half the grid, i.e. 6 columns</p> 
      <p>Then again, on small screens I should be the second element.</p> 
     </div> 
     <div class="large-6 small-12 large-pull-6 columns "> 
      <p>B: On large screens, I should be the second element in the row, i.e. 6 columns</p> 
      <p>Of course, on small screens, I should show up first!</p> 
     </div> 
    </div> 
</body>

의 소스 주문 섹션의 마지막 예와 같이 많은이 시도 ..

을 그것은 large-pull 및 large-push해야한다.

출처

2014-07-25 09:59:25 Sudheer

HTML에서 A와 B의 순서를 바꾸면 작동합니다. – Ben

참조 : http://jsfiddle.net/m45fQ/2/ – Ben

큰 문제가있는 fiddle.classes가 잘못되었습니다.이 http-//codepen.io/anon/pen을 확인하십시오./Koafk. – Sudheer

Zurb Foundation 소스 주문 클래스의 간단한 예제

답변

관련 문제