Reordering columns in a semantic-ui stackable grid

Question

I am currently playing around with the Sementic-UI framework responsive capabilities and I hit a wall when using the stackable grid. Specifically, I was trying to replicate a classic front page layout where large paragraphs and pictures are layout in one third and two thirds columns, alternating left and right.

<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>

I repeat this pattern for all sections and swap the two side by side columns every time. The thing is, when the grid is stacked, I would like to keep the image on top of the content. It works fine for the first case because the columns are already in the right order, but obviously fail for the second block since the image is placed after the content.

I was wondering if there is an easy way to accomplish this or can it only be done using javascript? Should I keep using the grid or should I use something else? If I need to use javascript, what would be the best way to detect the grid's layout change?

This is my first time doing responsive design so references on the topic are welcomed.

Answer 1

This is possible using the reversed variation of the grid element. I would suggest the following for the second grid:

<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>

Putting the image first by default and only reversing on computer screen sizes minimises the risk that the image can be at the end with columns stacked. It leaves the possibility of screen sizes where the image appears to the left before the columns have stacked, but this should be less serious an issue.