부트 스트랩 3 : 작은 화면 크기에서만 열 밀기 / 당기기

부트 스트랩 3 : 작은 화면 크기에서만 열 밀기 / 당기기

---

페이지에 다음 레이아웃이 있습니다.

<div class="col-lg-3">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-3">5</div>

 --------- ----- ----- ----- ---------
|    1    |  2  |  3  |  4  |    5    |
 --------- ----- ----- ----- ---------

그러나 더 작은 화면 크기에서는 다음 레이아웃을 원합니다.

<div class="col-xs-6">1</div>
<div class="col-xs-6">5</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">4</div>

 ----------------- -----------------
|        1        |        5        |
 ----------------- -----------------
|     2     |     3     |     4     |
 ----------- ----------- -----------

(열 순서의 재배 열에 유의하십시오.) 더 작은 화면 크기에서만 열을 밀거나 당길 수 있습니까? 나는 다음을 시도했지만 가장 이상한 레이아웃을 얻었고 <div>5</div>완전히 잃어버린 것 같습니다 ... :

<div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-2 col-xs-4 col-xs-push-4">2</div>
<div class="col-lg-2 col-xs-4>3</div>
<div class="col-lg-2 col-xs-4>4</div>
<div class="col-lg-3 col-xs-6 col-xs-pull-12">5</div>

---

간단하게 생각하여 답했습니다. 모바일 우선!

<div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-3 col-xs-6 col-lg-push-6">5</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div>

먼저 태블릿에서 원하는 순서대로 가져온 다음 데스크톱의 위치로 밀거나 당깁니다.

---

약간 다른 요구 사항이있었습니다 (여전히 비슷한 라인에 있음)

아래는 나를 거기에 데려다줍니다.

<div class="row">
    <div class="col-lg-1 col-xs-2">TIME</div>
    <div class="col-lg-5 col-xs-6">EVENT</div>
    <div class="col-lg-2 col-xs-4">STATUS</div>

    <div class="col-xs-2 visible-xs"></div> @*offset for xs*@

    <div class="col-lg-2 col-xs-6">START LIST</div>
    <div class="col-lg-2 col-xs-4">RESULTS</div>
</div>

참조 URL : https://stackoverflow.com/questions/21933664/bootstrap-3-push-pull-columns-only-on-smaller-screen-sizes