Переупорядочивание столбцов в сетке с семантикой ui

Question

В настоящее время я играю с возможностями интерфейса Sementic-UI, и я ударяю о стену при использовании стекируемой сетки. В частности, я пытался воспроизвести классический макет главной страницы, где большие абзацы и рисунки расположены в столбцах одной трети и двух третей, чередуясь влево и вправо.

<div class="ui stackable grid"> 
    <div class="sixteen wide column"> 
     <h2>Full width header</h2> 
    </div> 
    <div class="six wide column"> 
     <img alt="Left image" /> 
    </div> 
    <div class="ten wide column"> 
     <p>Right content</p> 
    </div> 
</div> 

<div class="ui stackable grid"> 
    <div class="sixteen wide column"> 
     <h2>Full width header</h2> 
    </div> 
    <div class="ten wide column"> 
     <p>Left content</p> 
    </div> 
    <div class="six wide column"> 
     <img alt="Right image" /> 
    </div> 
</div> 

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

Мне было интересно, есть ли простой способ выполнить это или это можно сделать только с помощью javascript? Должен ли я использовать сетку или использовать что-то еще? Если мне нужно использовать javascript, что бы лучше всего было определить изменение макета сетки?

Это мой первый раз, когда вы делаете отзывчивый дизайн, поэтому приветствуются ссылки на эту тему.

Answer 1

Это возможно с использованием изменения элемента сетки reversed. Я хотел бы предложить следующее для второй сетки:

<div class="ui stackable grid"> 
    <div class="row"> 
     <div class="sixteen wide column"> 
      <h2>Full width header</h2> 
     </div> 
    </div> 
    <div class="computer reversed row"> 
     <div class="six wide column"> 
      <img alt="Right image" /> 
     </div> 
     <div class="ten wide column"> 
      <p>Left content</p> 
     </div> 
    </div> 
</div> 

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