StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I have a suggestion but maybe not the perfect solution but you can use it if you only need to reorder these two columns:</p> <ol> <li>remove from your code <strong>( push )</strong> and <strong>( pull )</strong> that you used.</li> <li>make another copy of your code under the original one.</li> <li>now the important thing is to use <a href="http://getbootstrap.com/css/#responsive-utilities" rel="nofollow noreferrer">Responsive utilities</a> that Bootstrap offer.</li> <li>all you need to do is to use this two classes <strong>( .visible-xx )</strong> and <strong>( .hidden-xx )</strong> and <em>(xx : xs, sm, md, lg)</em>.</li> <li>by using them with your original code will make the Column you want visible or hidden at the resolution you need.</li> </ol> <p><strong>e.g:</strong></p> <pre><code> LG: ColumnA -- .visible-xx or .hidden-xx ( at the needed resolution ) ColumnB -- .visible-xx or .hidden-xx ( at the needed resolution ) </code></pre> <p>then the needed code using this two classes can also be like this :</p> <pre><code>MD: ColumnB -- .visible-xx or .hidden-xx ( at the needed resolution ) ColumnA -- .visible-xx or .hidden-xx ( at the needed resolution ) </code></pre> <p>** remember not to forget to change the order of your code in the copy like :</p> <pre><code><div class="row"> <div class=""> ColumnB </div> <div class=""> ColumnA </div> </code></pre> <h2><strong>Important:</strong></h2> <p>It's better to use the modifier classes <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> whenever possible, refer to the <a href="http://getbootstrap.com/css/#grid-column-ordering" rel="nofollow noreferrer">column ordering section</a> in the Bootstrap documentation, if it's not working you can use the other way.</p> <p>So you can try this first:</p> <pre><code><div class="row"> <div class="col-lg-9 col-lg-push-3"> Column B will be here </div> <div class="col-lg-3 col-lg-pull-9"> Column A will be here </div> </div> </code></pre> <p>hope this will help you.</p>

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