Reordering columns in a semantics grid

Question

I am currently playing with the features of the Sementic-UI interface and I am hitting the wall using a stackable mesh. In particular, I tried to reproduce the classic layout of the main page, where large paragraphs and figures are located in the columns of the third and two-thirds, 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 each time I change the place to two columns. The fact is that when the grid is folded, I would like to save the image on top of the content. It works great for the first case, because the columns are already in the correct order, but obviously do not work 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 this be done only with javascript? Should I use a grid or use something else? If I need to use javascript, what would be the best way to detect a mesh change?

This is my first time making a responsive design, so links to this topic are welcome.

Answer 1

This is possible using a reversed mesh element change. 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 changing the screen size on the computer screen minimizes the risk that the image may be at the end with stacked columns. This leaves the possibility of screen sizes when the image appears on the left before the columns fit, but this should be a less serious problem.