Foundation 5 Сетки защелкивающиеся

Question

Я использую фонд 5, и я пытаюсь достичь следующего DIV расположения на экране мобильного телефона:

-------------------- 
|  A   | 
-------------------- 
|  B   | 
-------------------- 
|  C   | 
-------------------- 
|  D   | 
-------------------- 
|  E   | 
-------------------- 

, и я хотел бы это, чтобы показать, как следующее на рабочий стол:

-------------------------------- 
|        | 
|    A    | 
|        | 
-------------------------------- 
|     |   | 
|  B   |   | 
|     |   | 
--------------------  E  | 
|     |   | 
|  C   |   | 
|     |   | 
-------------------------------- 
|        | 
|    D    | 
|        | 
-------------------------------- 

Кто-нибудь знает, как это сделать?

На данный момент у меня есть три ряда: один для A, один для B, C & E и один для D. Я пытался нажать и потянуть, чтобы изменить порядок D & E на мобильном изображении, но я похоже, не могут сделать это, поскольку они находятся в разных строках.

Обратите внимание, что содержимое DIVs является динамическим, поэтому я не могу использовать абсолютное позиционирование для переключения DIV на мобильном устройстве.

Большое спасибо заранее.

Answer 1

Одним из вариантов было бы иметь нормальную веб-страницу для загрузки, приведенный ниже код html достигнет того, что вам нужно, если бы рабочий стол загружал вашу веб-страницу.

<div class="row"> 
    <div class="large-12 columns"> 
     A 
    </div> 
</div> 

<div class="row"> 
    <div class="large-x columns"> 
     <div class="row"> 
      <div class = "large-12 columns"> 
       B 
      </div> 
     </div> 
     <div class="row"> 
      <div class = "large-12 columns"> 
       C 
      </div> 
     </div> 

    <div class="large-(12-x) columns"> 
     E 
    </div> 
</div> 

<div class="row"> 
    <div class = "large-12 columns"> 
     D 
    </div> 
</div> 

Если вам необходимо изменить его на основе прочь, если доступ к странице с помощью мобильного устройства, вам нужен сценарий для обнаружения этого. Я бы рекомендовал посмотреть на userAgent. Уже существует вопрос с использованием userAgent для обнаружения этого here. Как только вы получите сигнал о том, что он действительно доступен мобильному браузеру, вы можете использовать простые команды jQuery для динамического управления DOM.

Answer 2

Единственный способ сделать это с помощью foundation.css, чтобы скрыть и показать div-E в соответствии с размером экрана

<link href="http://cdn.jsdelivr.net/foundation/5.4.3/css/foundation.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="small-12 columns"> 
 
     A 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="small-12 medium-8 columns"> 
 
     <div class="row"> 
 
      <div class = "small-12 columns"> 
 
       B 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class = "small-12 columns"> 
 
       C 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="small-12 medium-4 hide-for-small columns"> 
 
     E 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class = "small-12 columns"> 
 
     D 
 
    </div> 
 
</div> 
 
    <div class="row"> 
 
<div class="small-12 medium-4 show-for-small columns"> 
 
     E 
 
</div> 
 
    </div>