html - bootstrap col-xs makes content invisible -

let me first : not duplicate of bootstrap col-sm making content disappear. have checked see if have missed rows, fine.

having said that, i'm using 24 column bootstrap, , adding col-xs class making content invisible. can see images , buttons on firebug, aren't visible on scree. disabling float:left on column class makes content visible again. have checked using firefox, chrome , ms edge, , got same result. html block affected:

    <div class="container">     <section id="content-promoted">         <div class="row">             <div class="col-sm-24">                 <h2>originals</h2>             </div>         </div>         <div class="row bg-dark p-tb-sm">             <!--start looping-->             <div class="col-md-6 col-xs-10">                 <div class="block">                     <img src="{{ asset('bundles/web/images/p-1.png') }}" class="img-responsive">                     <div class="block-content p-a-sm">                         <h4 class="name">name</h4>                         <p class="artist">artists</p>                         <div class="block-meta">                             <button class="btn btn-clear"><i class="icon-clock"></i> watch later</button>                             <button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button>                             <button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button>                         </div>                     </div>                 </div>             </div>             <!--end looping-->             <div class="col-md-6 col-xs-10">                 <div class="block">                     <img src="{{ asset('bundles/web/images/p-1.png') }}" class="img-responsive">                     <div class="block-content p-a-sm">                         <h4 class="name">name</h4>                         <p class="artist">artists</p>                         <div class="block-meta">                             <button class="btn btn-clear"><i class="icon-clock"></i> watch later</button>                             <button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button>                             <button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button>                         </div>                     </div>                 </div>             </div>             <div class="col-md-6 landscape">                 <div class="block">                     <img src="{{ asset('bundles/web/images/p-2.jpg') }}" class="img-responsive">                     <div class="block-content p-lr-sm p-tb-xs">                         <h4 class="name">name</h4>                         <p class="artist">artists</p>                         <div class="block-meta">                             <button class="btn btn-clear"><i class="icon-clock"></i> watch later</button>                             <button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button>                             <button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button>                         </div>                     </div>                 </div>                 <div class="block">                     <img src="{{ asset('bundles/web/images/p-2.jpg') }}" class="img-responsive">                     <div class="block-content p-lr-sm p-tb-xs">                         <h4 class="name">name</h4>                         <p class="artist">artists</p>                         <div class="block-meta">                             <button class="btn btn-clear"><i class="icon-clock"></i> watch later</button>                             <button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button>                             <button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button>                         </div>                     </div>                 </div>             </div>             <div class="col-md-6 landscape">                 <div class="block">                     <img src="{{ asset('bundles/web/images/p-3.jpg') }}" class="img-responsive">                     <div class="block-content p-lr-sm">                         <h4 class="name">name</h4>                         <p class="artist">artists</p>                         <div class="block-meta">                             <button class="btn btn-clear"><i class="icon-clock"></i> watch later</button>                             <button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button>                             <button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button>                         </div>                     </div>                 </div>                 <div class="block">                     <img src="{{ asset('bundles/web/images/p-3.jpg') }}" class="img-responsive">                     <div class="block-content p-lr-sm">                         <h4 class="name">name</h4>                         <p class="artist">artists</p>                         <div class="block-meta">                             <button class="btn btn-clear"><i class="icon-clock"></i> watch later</button>                             <button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button>                             <button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button>                         </div>                     </div>                 </div>                 <div class="block">                     <img src="{{ asset('bundles/web/images/p-3.jpg') }}" class="img-responsive">                     <div class="block-content p-lr-sm">                         <h4 class="name">name</h4>                         <p class="artist">artists</p>                         <div class="block-meta">                             <button class="btn btn-clear"><i class="icon-clock"></i> watch later</button>                             <button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button>                             <button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button>                         </div>                     </div>                 </div>             </div>         </div>     </section>     <section id="content-carousels">         <div class="row">             <!--this looped div-->             <div class="col-sm-24">carousel</div>         </div>     </section>     <!--container end--> </div> 

and css:

.block{background: black;} .landscape .block{margin-top: 10px;}  .landscape .block:first-child{margin-top:0;}  .block img{border-bottom: 2px solid #00adef; }  .block-meta{border-top:1px solid #151515;}   .block .btn-clear{background: none;border:none; margin: 0;padding: 0; border-radius: 0;text-align:left; font-size: 12px;} 

detailed code here in codepen: http://codepen.io/samia92/pen/rrjemb . resize window trigger ``extra-small resolution , first 2 block disappears!

the problem in code don't have bootstrap's grid classes on last 2 columns xs screens. result on extra-small screen first 2 columns being floated while rest of 2 not floating , overlaying on first 2 columns.

your code structure should this:

<div class="row bg-dark p-tb-sm">     <div class="col-md-6 col-xs-10"></div>     <div class="col-md-6 col-xs-10"></div>     <div class="col-md-6 landscape col-xs-10"></div>     <div class="col-md-6 landscape col-xs-10"></div> </div>