Układ trzech kolumn z blokiem o różnych wysokościach

Question

Mam prosty układ 3-kolumnowy oparty na Twitterze Bootstrap. Jedynym problemem jest to, że każda kolumna jest złożona z bloku o różnych wysokościach.

<div class="container"> 
    <div id="blocks" class="row"> 
     <div class="span4"> 
      <div class="block" id="block1"> 
      <div class="block" id="block4"> 
      <div class="block" id="block7"> 
     </div> 
     <div class="span4"> 
      <div class="block" id="block2"> 
      <div class="block" id="block5"> 
      <div class="block" id="block8"> 
     </div>    
     <div class="span4"> 
      <div class="block" id="block3"> 
      <div class="block" id="block5"> 
      <div class="block" id="block9"> 
     </div> 
    </div> 
</div> 

.

Działa całkiem dobrze, z wyjątkiem małych wyświetlaczy. Następnie kolejność bloków nie jest sortowana.

Czy istnieje jakiś sposób, aby osiągnąć posortowane bloki bez JavaScript?

Answer 1

Nie ma sposobu, aby osiągnąć ten efekt dzięki strukturze 3 kolumn. Jeśli bloki byłyby tej samej wysokości, to można było unieść się: zostawione wszystkie klocki bez kolumn, a następnie zawijałyby w kolejności. Ponieważ nie są tej samej wielkości, trzeba by użyć JavaScript, takich jak beton:

http://masonry.desandro.com/

Answer 2

Jego będzie dość trudne do osiągnięcia tego celu, może chce bawić się z jednej listy z float: left; lub display: inline-block;

lub

można mieć 2 zestaw liście z @media wewnątrz css, więc zależy od wielkości ekranu można pokazać lub ukryć wybrany div

przykład css

@media screen and (min-width: 768px) and (max-width: 1024px) { 
.displayFullScreen {display: block;} 
.displayMobileScreen {display: none;} 
} 


@media screen and (max-width: 767px) { 
.displayFullScreen {display: none;} 
.displayMobileScreen {display: block;} 
}