<p dir="auto">Normally the columns in a row should float left in a row. When the row becomes to small for wrapping the columns, the columns should stack below and float again. Why is my last column not stacking in the small screen size (sm). Instead it floats also to the left on the first row of columns and dissapears behind the other, so it is not visible anymore. This is only with the class col-sm-12.</p>
<p dir="auto">Now I solved it with col-sm-11 and that is stacking properly, but it is not what it should have been.</p>
<p dir="auto">The probleme occurs when viewing this frgment of page on a small screen : the "heading 1.1" and "heading 1.2" blocks are not displayed.</p>
<p dir="auto">I am using Bootstrap 3.0.0, chrome 29.0.1547.57 on Linux.<br>
In this example, i am not using any CSS or Javascript files except  bootstrap.min.css, jquery-1.10.2.min.js and bootstrap.min.js.</p>
<p dir="auto">You can also see it here : <a href="http://jsfiddle.net/tFHCY/" rel="nofollow">http://jsfiddle.net/tFHCY/</a></p>
<p dir="auto">Here is the HTML code :</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;section class=&quot;row&quot;&gt;
    &lt;section class=&quot;col-lg-3 col-xs-6&quot;&gt;
        &lt;div  style=&quot;background-color:#CE45FF&quot; class=&quot;heading&quot;&gt;
          &lt;h2&gt;Heading 2.1&lt;/h2&gt;
          &lt;p&gt;Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. &lt;/p&gt;
          &lt;p&gt;&lt;a class=&quot;btn btn-default&quot; href=&quot;#&quot;&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
    &lt;/section&gt;
    &lt;section class=&quot;col-lg-3 col-xs-6&quot;&gt;
        &lt;div  style=&quot;background-color:#DDBBFF&quot; class=&quot;heading&quot;&gt;
          &lt;h2&gt;Heading 2.2&lt;/h2&gt;
          &lt;p&gt;Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. &lt;/p&gt;
          &lt;p&gt;&lt;a class=&quot;btn btn-default&quot; href=&quot;#&quot;&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
           &lt;/div&gt;
    &lt;/section&gt;
    &lt;section class=&quot;col-lg-6 col-xs-12&quot;&gt;
        &lt;div  style=&quot;background-color:#CDE9FF&quot; class=&quot;heading&quot;&gt;
          &lt;h2&gt;Heading 2.3&lt;/h2&gt;
          &lt;p&gt;Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.&lt;/p&gt;
          &lt;p&gt;&lt;a class=&quot;btn btn-default&quot; href=&quot;#&quot;&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
    &lt;/section&gt;
&lt;/section&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">section</span> <span class="pl-c1">class</span>="<span class="pl-s">row</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">section</span> <span class="pl-c1">class</span>="<span class="pl-s">col-lg-3 col-xs-6</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">div</span>  <span class="pl-c1">style</span>="<span class="pl-s">background-color:#CE45FF</span>" <span class="pl-c1">class</span>="<span class="pl-s">heading</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>Heading 2.1<span class="pl-kos">&lt;/</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. <span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">class</span>="<span class="pl-s">btn btn-default</span>" <span class="pl-c1">href</span>="<span class="pl-s">#</span>"<span class="pl-kos">&gt;</span>View details &amp;raquo;<span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">section</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">section</span> <span class="pl-c1">class</span>="<span class="pl-s">col-lg-3 col-xs-6</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">div</span>  <span class="pl-c1">style</span>="<span class="pl-s">background-color:#DDBBFF</span>" <span class="pl-c1">class</span>="<span class="pl-s">heading</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>Heading 2.2<span class="pl-kos">&lt;/</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. <span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">class</span>="<span class="pl-s">btn btn-default</span>" <span class="pl-c1">href</span>="<span class="pl-s">#</span>"<span class="pl-kos">&gt;</span>View details &amp;raquo;<span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
           <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">section</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">section</span> <span class="pl-c1">class</span>="<span class="pl-s">col-lg-6 col-xs-12</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">div</span>  <span class="pl-c1">style</span>="<span class="pl-s">background-color:#CDE9FF</span>" <span class="pl-c1">class</span>="<span class="pl-s">heading</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>Heading 2.3<span class="pl-kos">&lt;/</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.<span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">class</span>="<span class="pl-s">btn btn-default</span>" <span class="pl-c1">href</span>="<span class="pl-s">#</span>"<span class="pl-kos">&gt;</span>View details &amp;raquo;<span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">section</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">section</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Screenshot simulating an xs screen size :</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/2bc4f32cfe7408b6a1b9dcf02629799e533ca789011d8e9cd66dcd885243b85b/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f353332323131342f313033353436362f36376337656237612d306632622d313165332d386239302d3537363539323131633663332e706e67"><img src="https://camo.githubusercontent.com/2bc4f32cfe7408b6a1b9dcf02629799e533ca789011d8e9cd66dcd885243b85b/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f353332323131342f313033353436362f36376337656237612d306632622d313165332d386239302d3537363539323131633663332e706e67" alt="bootstrap-hidden-columns" data-canonical-src="https://f.cloud.github.com/assets/5322114/1035466/67c7eb7a-0f2b-11e3-8b90-57659211c6c3.png" style="max-width: 100%;"></a></p>
<p dir="auto">Thanks,<br>
Yann scheydeker</p>