Столбцы, складывающиеся на фундамент

Question

Я пытаюсь создать шаблон электронной почты, используя Foundation for e-mails.

Это мой фрагмент кода:

<container class="card-spacer"> 
    <row> 
     <columns small="12" large="6"> 
      <img src="https://b.zmtcdn.com/data/pictures/0/18419730/bb6821c381f4616717178beca3929af7.jpg" style="display: inline-block;" 
     </columns> 
     <columns small="12" large="6"> 
      <p class="zfb-zero-margin-paragraph zfb-primary-text-font text-right">Get more insights and analytics on your ads</p> 
      <p class="zfb-zero-margin-paragraph zfb-body-text-font text-right">View web dashboard for XYZ <a href="www.xyz.com" class="text-color-gold">www.xyz.com</a></p> 
     </columns> 
    </row> 
</container> 

Я хотел бы иметь изображение и текст, которые находятся в разных колонках появляются бок о бок на больших устройствах (например, рабочий стол по электронной почте клиенты) и складываются друг на друга на мобильных клиентах.

Любые идеи о том, как я могу достичь того же?

Answer 1

Столбцы в гибкой сетке не будут обертываться, если не заданы явный размер - это то, что позволяет магическому автоматическому размеру работать. Чтобы сделать столбцы на меньших экранах, добавьте класс .small-12 вручную.

Чтобы переключиться обратно на поведение разброса из процентного или усадочного поведения, используйте классы .medium-expand или .large-expand. В приведенном ниже примере столбцы стекают на маленьких экранах и становятся равномерными на больших экранах.

<div class="row"> 
     <div class="small-12 large-expand columns">One</div> 
     <div class="small-12 large-expand columns">Two</div> 
    </div> 

    For more information check its document 
    http://foundation.zurb.com/sites/docs/flex-grid.html