부트 스트랩으로 모바일에서 항목 재정렬하기

Question

나는 부트 스트랩으로 작성된 웹 사이트를 가지고 있는데, 그 중에서도 각 행에 3 개의 항목이있는 컨테이너에 2 개의 .rows가 있습니다. 즉, 아래에 몇 개의 텍스트가있는 이미지와 기타. 데스크톱에서는 좋지만 브라우저에서 모바일에서 순서를 재조정하는 방법이 확실하지 않으므로 행의 각 항목이 가운데에 항목이 있고 양쪽에 간격이있는 항목이 하나씩 차례대로 나열됩니다. 항목 중. 항목뿐만 아니라, 페이지 사이의 간격이 될 수 있도록

http://jsfiddle.net/DTcHh/2481/

<div class="container-fluid" id="nr2"> 

<div class="row"> 
<div class="col-lg-12"> 
<h1 id="tilbud">Header</h1> 
<h3 id="tilbudsbes"> Description</h3> 

</div> 




<div class="row" style="margin-top:10%"> 

<div class="col-md-2"></div> 
<div class="col-md-2"> 
<div> 
<img src="Img/IMG.png" class="illustrasjon img-responsive"> 
<h4 class="tittel">Item</h4> 
<div class="linje"></div> 
<p class="prodBes">LOREM IPSUM HOIEFEOWIF BLA BLA BLA BLAH </p> 
</div> 
</div> 
<div class="col-md-1"></div> 
<div class="col-md-2"> 
<div> 
<img src="Img/IMG.png" class="img-responsive"> 
<h4 class="tittel">Item</h4> 
<div class="linje"></div> 
<p class="prodBes">DESCRIPTION OIEHOIWEJF 
    OIWJEFOIWEJFOIWEJFOI 
    WJEOF EWKJFWEKFJN EFIWJEF WKEJF 
    WEKJF WKJEF WKEJF WEF</p> 
</div> 
</div> 

<div class="col-md-1"></div> 
<div class="col-md-2"> 
<div> 

<img src="Img/IMG.png" class="img-responsive"> 
<h4 class="tittel">Item</h4> 
<div class="linje"></div> 
<p class="prodBes">EIOFJWEOIFJOIWE ITEM ITEM WEIFOJWEOFJOIWEFOIEJWF</p> 
</div> 
<div class="col-md-2"></div> 
</div> 
</div> 


<div class="row" style=""> 

<div class="col-sm-2"></div> 
<div class="col-sm-2"> 
<div> 
<img src="Img/IMG.png" class="illustrasjon img-responsive"> 
<h4 class="tittel">Item</h4> 
<div class="linje"></div> 
<p class="prodBes">LOREM IPSUM DOLOR SIT AMET </p> 
</div> 

</div> 
<div class="col-sm-1"></div> 

<div class="col-sm-2"> 
<div> 
<img src="Img/IMG.png" class="img-responsive"> 
<h4 class="tittel">Item</h4> 
<div class="linje"></div> 
<p class="prodBes">LOREM LOREM IPSUM UPS</p> 
</div> 
</div> 
<div class="col-sm-1"></div> 

<div class="col-sm-2"> 
<div> 

<img src="Img/IMG.png" class="img-responsive"> 
<h4 class="tittel">Item</h4> 
<div class="linje"></div> 
<p class="prodBes">BLAH BØAH OIEHWFOIWHEFOIHWE 
    IOFHOWIEFOIWEFOIWEF</p> 
</div> 
<div class="col-sm-2"></div> 
</div> 
</div> 
</div> 
</div> 

제가 행의 한쪽에 빈 컬럼이 이유

이다. 간격에 여백이나 여백을 사용할 수 있지만 항목이 페이지의 가운데에 있지 않습니다.

도움이 될 것입니다. :)

Answer 1

안녕하세요. 정말 좋은 부트 스트랩 문서를보세요. 클래스 사용법이 설명되어 있습니다.

lg md sm xs가 있으며 한 번에 두 개 이상의 클래스를 적용 할 수 있습니다. 그들은 다른 화면 크기를 대상으로합니다. Md는 대부분의 장치에서 제대로 작동하므로 사용되는 표준입니다. 그러나 우수한 컨트롤을 원한다면 하나 이상의 클래스를 적용해야합니다.

Answer 2

는 지금까지 사용 된 모든 사업부의의이 같은 시도 :

text-center 텍스트를 중심으로 사용되는, center block는

<div class="col-md-2 col-xs-12 col-sm-12 text-center "> 
    <div> 
    <img src="Img/IMG.png" class="illustrasjon img-responsive center-block"> 
    <h4 class="tittel">Item</h4> 
    <div class="linje"></div> 
    <p class="prodBes">LOREM IPSUM HOIEFEOWIF BLA BLA BLA BLAH </p> 
    </div> 
</div> 

DEMO