StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can do this with the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes" rel="nofollow">flexbox model</a>. The new flexbox model is <a href="http://caniuse.com/flexbox" rel="nofollow">not yet widely supported</a> (especially not by older browsers, as the specification has changed recently), but since you mention that it is meant to work on smartphones, this solution might do the trick for you. </p> <p>I believe most smartphone browsers would support this solution, the one browser which I am not so sure about is Windows Phone 8's version of IE10, IE10 does support this approach, but I'm not sure if the Windows Phone 8 version of IE10 behaves exactly the same as the desktop version.</p> <p>Setting the variously prefixed <code>display</code> property value and the <code>flex-direction</code> property on the containing element ensures that the container behaves like a flex box in a column direction.</p> <p>Setting the variously prefixed <code>order</code> property to <code>1</code> on <code>.cell1</code> ensures that the initial value of <code>0</code> on <code>.cell1</code> is overwritten, and therefore it pushes <code>cell1</code> past <code>.cell2</code> in the order, as its order value is higher than <code>cell2</code>'s order value (which is still equal to its initial value of <code>0</code>).</p> <p>Here's a <kbd><a href="http://jsfiddle.net/R2umC/" rel="nofollow"><strong>jsFiddle</strong></a></kbd> demonstrating this approach.</p> <p><strong>CSS</strong>:</p> <pre><code>.table { display: table; } .table .cell1, .table .cell2 { display: table-cell; } @media (max-width: 480px) { .table { display: -webkit-box; -webkit-flex-direction: column; display: -moz-box; -moz-flex-direction: column; display: -ms-flexbox; -ms-flex-direction: column; display: -webkit-flex; display: flex; flex-direction: column; } .table .cell2, .table .cell1 { width: 100%; display: block; } .table .cell1 { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 1; -webkit-order: 1; order: 1; } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload