StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><em>I've moved this to an answer while we wait to see if this is tagged with duplicate.</em></p> <p>To get the two columns maintained within a mobile/tablet environment You're going to need to add another set of classes on the elements as well as some additional rules in your CSS. </p> <p>By default all of the elements stack on mobile because a linear version is what we've come to expect. If you check out <a href="http://foundation.zurb.com/docs/grid.php">http://foundation.zurb.com/docs/grid.php</a> you can see that Zurb have also created another set of styles based on a 4 column mobile grid. By adding these additional classes it allows you control your columns to occupy 1/3 1/2 2/3 full width.</p> <p>I've coded up a basic example for you to use -> <a href="http://playground.responsivedesign.is/twitter-bootstrap/">http://playground.responsivedesign.is/twitter-bootstrap/</a>, but below are the details.</p> <p>This is the markup you would add to your HTML (the additional <code>.mobile-*</code> classes)</p> <pre><code> <div class="span4 mobile-one">...</div> <div class="span8 mobile-three">...</div> </code></pre> <p>or</p> <pre><code> <div class="span6 mobile-two">...</div> <div class="span6 mobile-two">...</div> </code></pre> <p>And the CSS that needs to be added is..</p> <pre><code>.row-fluid .mobile-one { width: 31.491712707182323%; *width: 31.43852121782062%; } .row-fluid .mobile-three { width: 65.74585635359117%; *width: 65.69266486422946%; } .row-fluid .mobile-two { width: 48.61878453038674%; *width: 48.56559304102504%; } .row-fluid .mobile-one, .row-fluid .mobile-two, .row-fluid .mobile-three { float:left; margin-left: 2.7624309392265194%; *margin-left: 2.709239449864817%; } </code></pre> <p>You have also asked whether it would also work with <code>.row</code> instead of using the <code>.fluid-row</code>. It could do but there are some rules that come with the <code>.fluid-row</code> which are cascading so you will need to do a bit more trial and error work. My official stance would be to rethink your reasons for a pixel based static layout (albeit responsive with @media) and go with a fluid layout.</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