Re-order columns with CSS

I needed to re-order my Bootstrap columns (rows + col) when viewing the page on a mobile.

<div class="row">
<div id="first-column" class="col"></div>
<div id="second-column" class="col"></div>
<div id="third-column" class="col"></div>
</div>

#first-column { order: 1; }
#second-column { order: 2; }
#third-column { order: 3; }

@media (max-width: 768px) {
#second-column { order: 3; }
#third-column { order: 2; }
}

References

•   stackoverflow.com/questions/220273/how-can-i-reorder-my-divs-with-css