two third
This is a .twothird (66%). (.twothirds will also work.)
This is a .third (33%).
This is a .third (33%).
This is a .twothird (66%). (.twothirds will also work.)
The second element must be the last child or the columns will wrap.
Works
<div class="row">
<div class="container">
<div class="twothird">
<p>This is a <samp>.twothird</samp> (66%). (<samp>.twothirds</samp> will also work.)</p>
</div>
<div class="third">
<p>This is a <samp>.third</samp> (33%).</p>
</div>
</div>
</div>
<div class="row">
<div class="container margin-top-1">
<div class="third">
<p>This is a <samp>.third</samp> (33%).</p>
</div>
<div class="twothird">
<p>This is a <samp>.twothird</samp> (66%). (<samp>.twothirds</samp> will also work.)</p>
</div>
</div>
</div>
Doesn't Work
<div class="row">
<div class="container">
<div class="twothird">
<p>This is a <samp>.twothird</samp> (66%). (<samp>.twothirds</samp> will also work.)</p>
</div>
<div class="third">
<p>This is a <samp>.third</samp> (33%).</p>
</div>
</div>
</div>
<div class="row">
<div class="container margin-top-1">
<div class="third">
<p>This is a <samp>.third</samp> (33%).</p>
</div>
<div class="twothird">
<p>This is a <samp>.twothird</samp> (66%). (<samp>.twothirds</samp> will also work.)</p>
</div><!-- the third .third is no longer the last child -->
<div class="another-element"></div>
</div>
</div>
Result
This is a .third (33%).
This is a .third (33%).