html - Reordering columns in a semantic-ui stackable grid -

html - Reordering columns in a semantic-ui stackable grid -

i playing around sementic-ui framework responsive capabilities , nail wall when using stackable grid. specifically, trying replicate classic front end page layout big paragraphs , pictures layout in 1 3rd , 2 thirds columns, alternating left , 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 pattern sections , swap 2 side side columns every time. thing is, when grid stacked, maintain image on top of content. works fine first case because columns in right order, fail sec block since image placed after content.

i wondering if there easy way accomplish or can done using javascript? should maintain using grid or should utilize else? if need utilize javascript, best way observe grid's layout change?

this first time doing responsive design references on topic welcomed.

html css layout responsive-design semantic-ui