불규칙 타일의 부트 스트랩 CSS 레이아웃 - 푸시 앤 풀 사용

Question

부트 스트랩 3.3.2를 사용하고 있으며 혼란스러운 상황에 처했습니다. 원하는 효과 등이

<div class='container'> 

     <div style='padding-bottom: 30px;' class='row'> 
      <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div> 
      <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div> 
      <div class='col-md-6 col-sm-6 col-xs-12'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div> 
     </div> 

     <div style='padding-bottom: 30px;' class='row'> 
      <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div> 
      <div class='col-md-6 col-sm-6 col-xs-12'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div> 
      <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div> 
     </div> 

     <div style='padding-bottom: 30px;' class='row'> 
      <div class='col-md-6 col-sm-6'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div> 
      <div class='col-md-3 col-sm-3'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div> 
      <div class='col-md-3 col-sm-3'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div> 
     </div> 

</div> 

과 같은

image http://imageshack.com/a/img537/8048/MAcoOV.png

나의 현재 HTML을 아래 그림에 표시됩니다 그리고 나는 그것이 바탕 화면의 모습과 현재 만족하고 있습니다. 그러나 화면 크기가 770px보다 작거나 col-xs-* 눈금으로 나뉠 때 아래 그림처럼 보이게해야합니다.

image http://imageshack.com/a/img911/4395/WIt2nk.gif

그러나, 2 행으로 원하는 첫 번째 행 바꿈 작은 화면 : 라인의 두 사각형 이미지; 두 번째 라인이 큽니다. 그러나 desktop의 화면에 표시되는 행 2는 세 줄로 나뉩니다 : 정사각형, 커다란, 정사각형. 나는 정사각형, 사각형, 대형이 필요하다. 마지막으로 큰 이미지가 필요하기 때문에 3 번째 행과 비슷합니다. 나는 CSS 질서를 가지고 노는 것을 시도하고 있었다. 그러나 그것은 나의 어디에서도 가지 않았다. 여분의 div을 image s와 함께 삽입하는 방법에 대해서도 생각하고 있었고, 그걸 xs 그리드에만 표시되도록 만들었지 만 과장된 것으로 보입니다. 다른 아이디어가없고 누군가에게 팁이 있는지 궁금하지 마십시오. 당신이

Answer 1

항상 당신이 push 및 pull을 사용해야합니다이를 위해 모바일 최초의

생각 감사드립니다. 그래서 해결책은 내가 수행 한 사실 그래서이

<div class='container'> 

     <div style='padding-bottom: 30px;' class='row'> 
      <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div> 
      <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div> 
      <div class='col-md-6 col-sm-6 col-xs-12'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div> 
     </div> 

     <div style='padding-bottom: 30px;' class='row'> 
      <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div> 

      <div class='col-md-3 col-sm-3 col-xs-6 col-sm-push-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div> 
      <div class='col-md-6 col-sm-6 col-xs-12 col-sm-pull-3'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div> 
     </div> 

     <div style='padding-bottom: 30px;' class='row'> 

      <div class='col-md-3 col-sm-3 col-xs-6 col-sm-push-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div> 
      <div class='col-md-3 col-sm-3 col-xs-6 col-sm-push-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div> 
      <div class='col-md-6 col-sm-6 col-xs-12 col-sm-pull-6'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div> 
     </div> 

</div> 

처럼 될 것이다 첫번째 그때 나는 col에서 sm, md 및 lg 화면을 조정 push 및 pull를 사용하여 ... xs/모바일 화면을 디자인 할 것입니다 .

P.S.style=max-width: 100%; 대신 .img-responsive 클래스를 사용하는 것이 더 좋습니다.