부트 스트랩 3으로 열 맞춤 설정

Question

부트 스트랩에 3 개의 열이있는 기사를 코딩하고 있습니다. 나는 대형 스크린 함께 일하고 있어요 때 그것은

것 같아하지만 나는 그것을 같이 할 작은 화면과 함께 일하고 있어요 때

은 내가 어떻게 할 수 있습니까?

Answer 1

.col-xx-push-* 및 .col-xx-pull-* 클래스를 사용하여 Column ordering을 사용해야합니다.

하나 개의 솔루션은 다음과 같이 수 : 다른 브레이크 포인트

<div class="row"> 
    <div class="col-md-6 col-md-push-2 col-sm-12">B</div> 
    <div class="col-md-2 col-md-pull-6 col-sm-6">A</div> 
    <div class="col-md-4 col-sm-6">C</div> 
</div> 

플레이를 실제 필요에 맞게 md 및 sm을 변경하여. jsbin.com/reqilege가

Answer 2

여기 트릭 주문 B, A, C의 박스를 가지고있다 :

액션 상기 예

. 그런 다음 B를 A의 너비만큼 오프셋하고 절대 위치 지정을 사용하여 A를 그 자리에 놓습니다.

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-offset-3 col-sm-6 col-xs-12"> 
      <h1>B</h1> 
     </div> 
     <div class="col-sm-3 col-xs-6 shift-me"> 
      <h1>A</h1> 
     </div> 
     <div class="col-sm-3 col-xs-6"> 
      <h1>C</h1> 
     </div> 
    </div> 
</div> 

CSS

.row { 
    position: relative; 
} 
.row > div { 
    border: 2px solid black; 
} 
.shift-me { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
@media (max-width: 768px) { 
    .shift-me { 
     position: static; 
    } 
} 

http://jsfiddle.net/valentin/MkbA2/

Answer 3

당신은 멋 부리다에 2 중간에 pushb div 및 pullA div에 필요 B div의 이온. 당신은 열이 밀어하고 Bootply 샘플 here을 here

<div class="row"> 
    <div id="b" class="col-md-6 col-md-push-3 col-sm-12">Div B</div> 
    <div id="a" class="col-md-3 col-md-pull-6 col-sm-6">Div A</div> 
    <div id="c" class="col-md-3 col-sm-6 ">Div C</div> 
</div> 

당겨에 대한 자세한 내용을보실 수 있습니다.