<p dir="auto">Hi, I've noticed that a structure like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;row&quot;&gt;
                &lt;div class=&quot;col-xs-6 col-sm-4 col-md-4 col-lg-2 yellow&quot;&gt;&lt;h2&gt;Col 4&lt;/h2&gt;&lt;/div&gt;
                &lt;div class=&quot;col-xs-6 col-sm-8 col-md-4 col-lg-4  blue&quot;&gt;&lt;h2&gt;Col 8&lt;/h2&gt;&lt;/div&gt;
                &lt;div class=&quot;col-xs-12 col-sm-12 col-md-4 col-lg-6 red&quot;&gt;&lt;h2&gt;Col 8&lt;/h2&gt;&lt;/div&gt;
            &lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div class="row"&gt;
                &lt;div class="col-xs-6 col-sm-4 col-md-4 col-lg-2 yellow"&gt;&lt;h2&gt;Col 4&lt;/h2&gt;&lt;/div&gt;
                &lt;div class="col-xs-6 col-sm-8 col-md-4 col-lg-4  blue"&gt;&lt;h2&gt;Col 8&lt;/h2&gt;&lt;/div&gt;
                &lt;div class="col-xs-12 col-sm-12 col-md-4 col-lg-6 red"&gt;&lt;h2&gt;Col 8&lt;/h2&gt;&lt;/div&gt;
            &lt;/div&gt;
</code></pre></div>
<p dir="auto">wasn't rendering correctly in xs and sm sizes because of the css was missing:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@media (min-width: 768px){
                .col-sm-12{
                    float:left;
                }
            }
            .col-xs-12{
                    float:left;
                }"><pre class="notranslate"><code class="notranslate">@media (min-width: 768px){
                .col-sm-12{
                    float:left;
                }
            }
            .col-xs-12{
                    float:left;
                }
</code></pre></div>
<p dir="auto">Like said before on posts <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="18529511" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/10152" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/10152/hovercard" href="https://github.com/twbs/bootstrap/issues/10152">#10152</a> and <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="18032897" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/9454" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/9454/hovercard" href="https://github.com/twbs/bootstrap/issues/9454">#9454</a> full-width columns (.col-*-12) should also be floated, since those are not inline elements.</p>
<p dir="auto">As other columns are floating, full-width column will ignore those because browser removes floating elements from the normal flow. For that reason full-width element will be displayed just where it occurs in the text, and that is under floated columns, not next to those.</p>
<p dir="auto">Inline elements inside full-width column do respect the boundaries of the floating elements, but that is not enough.</p>
<p dir="auto">See this fiddle: <a href="http://jsfiddle.net/8Bg2H/" rel="nofollow">http://jsfiddle.net/8Bg2H/</a> and remove the "float: left;" of the full-width element to see what I mean.</p>
<p dir="auto">This change will affect to files grid.less and mixins.less (.make-grid-columns-float).</p>