상단 고정 탐색 메뉴로 반응 형 레이아웃을 만들고 있습니다. 그 아래에는 세로 막대 (3)와 내용 (9)에 대한 두 개의 열이 있습니다. 데스크탑에서 다음과 같이 보이는 것은

탐색 모음
[3] [9]

resize모바일 navbar로 압축 하면 숨겨지고 사이드 바는 다음과 같이 내용 위에 쌓입니다.

탐색 모음
[3]
[9]

메인 콘텐츠를 맨 위에 표시하려면 모바일 주문을 다음과 같이 변경해야합니다.

탐색 모음
[9]
[3]

내가 찾은 이 문서 같은 점을 다루고 있지만, 허용 대답은 솔루션이 더 부트 스트랩의 현재 버전에 적용 말할 위해 편집되었다.

모바일에서이 항목을 어떻게 재정렬 할 수 있습니까? 또는 sidbar 목록 그룹을 확장 탐색 메뉴로 가져 오려면 어떻게해야합니까?

내 코드는 다음과 같습니다.

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
  </div>
</div><!--end sidebar-->


<div class="col-lg-9">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="page-header">
     Main Content
    </div>
  </div>
</div><!--end main content area-->

작은 화면에서는 열 순서를 변경할 수 없지만 큰 화면에서는 열 순서를 변경할 수 있습니다.

따라서 열 순서를 변경하십시오.

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

기본적으로 메인 콘텐츠가 먼저 표시됩니다.

따라서 모바일 기본 컨텐츠가 먼저 표시됩니다.

으로 사용 col-lg-push하고 col-lg-pull우리는 오른쪽에 왼쪽과 주요 내용에 큰 화면과 화면의 사이드 바에서 열 순서를 변경할 수 있습니다.

여기에서 일하는 바이올린 .

2018 업데이트

Bootstrap 3을 기반으로 한 원래 질문의 경우 해결책은 push-pull 을 사용하는 것 입니다.

에서 부트 스트랩 4 지금의 수 , 순서를 변경하려면 열을 전체 폭이 쌓인 경우에도 부트 스트랩 4 인 flexbox 덕분에, 수직. OFC에서 푸시 풀 방법은 여전히 ​​작동하지만 이제 Bootstrap 4에서 열 순서를 변경하는 다른 방법이 있으므로 전각 열의 순서를 바꿀 수 있습니다.

방법 1 - 사용 flex-column-reverse을위한 xs화면 :

<div class="row flex-column-reverse flex-md-row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9">
        main
    </div>
</div>

방법 2 - 사용 order-first을위한 xs화면 :

<div class="row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9 order-first order-md-last">
        main
    </div>
</div>

부트 스트랩 4 (알파 6) : http://www.codeply.com/go/bBMOsvtJhD
부트 스트랩 4.1 : https://www.codeply.com/go/e0v77yGtcr

원본 3.x 답변

Bootstrap 3 기반 의 원래 질문의 경우 솔루션은 더 넓은 너비에 푸시 풀 을 사용 하는 것이 었으며 열은 더 작은 (xs) 너비의 자연 순서입니다. (AB는 BA와 반대입니다).

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3">
            main
        </div>
        <div class="col-md-3 col-md-pull-9">
            sidebar
        </div>
    </div>
</div>

부트 스트랩 3 : http://www.codeply.com/go/wgzJXs3gel

@emre는 " 작은 화면에서는 열 순서를 변경할 수 없지만 큰 화면에서는 열 순서를 변경할 수 있습니다 "라고 말했습니다. 그러나 이것은 부트 스트랩 3에서 " 전각 "스택 된 "열의 순서를 변경할 수 없습니다."라고 명시해야합니다 .

여기에 대한 답변은 2 셀에 대해서만 작동하지만 열에 더 많은 열이 있으면 더 복잡해질 수 있습니다. 여러 열의 셀 수에 대한 일반화 된 솔루션을 찾았습니다.

목표

태블릿 / 데스크톱에서 디자인이 요구하는 순서에 따라 모바일에서 일련의 태그를 가져옵니다. 이 구체적인 예에서, 하나의 태그는 평상시보다 빨리 흐름에 들어가고 다른 태그는 평소보다 늦게 흐름에 들어가야합니다.

변하기 쉬운

[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]

태블릿 +

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][5 desc    ]
[4 caption][          ]
[         ][          ]

따라서 헤드 라인은 tablet +에서 바로 뒤섞여 야하며 기술적으로는 desc도 셔플해야합니다. 모바일에서는 광고 제목 앞에있는 캡션 태그 위에 있습니다. 당신은 순간에 4 캡션이 문제가 있음을 알 수 있습니다.

모든 셀의 높이가 다를 수 있고 다음 셀과 같이 위에서 아래로 플러시되어야한다고 가정 해 봅시다 (테이블과 같이 약한 트릭을 배제 함).

모든 부트 스트랩 그리드 문제와 마찬가지로 1 단계는 HTML이 페이지에서 모바일 순서 (1 2 3 4 5) 여야한다는 것을 인식하는 것입니다. 그런 다음 Java / 스크립트없이 이상적인 방식으로 태블릿 / 데스크톱을 다시 정렬하는 방법을 결정하십시오.

이 솔루션 얻을 1 headline과 3 qty오른쪽이 아닌 왼쪽에 앉아 단순히 그들 모두를 설정하는 것입니다 pull-right. 이것은 CSS를 적용합니다 float: right. 즉, 오른쪽에 맞는 첫 번째 열린 공간을 찾습니다. 브라우저의 CSS 프로세서가 다음 순서로 작동한다고 생각할 수 있습니다. 1은 오른쪽 상단에 맞습니다. 2는 다음이며 규칙 ( float: left)이므로 왼쪽 상단으로 이동합니다. 그런 다음 3은 float: right1 아래로 도약합니다.

그러나이 솔루션으로는 충분하지 않았습니다 4 caption. 오른쪽 2 개의 셀이 2 image왼쪽에 너무 짧아서 두 셀이 결합 된 것보다 더 길기 때문입니다. 부트 스트랩 그리드는 영광스러운 플로트 핵 4 caption 입니다 float: left. 와 2 image왼쪽에 너무 많은 공간을 차지,4 caption 시도는 다음 사용 가능한 공간에 맞게 - 자주 오른쪽 열이 아니라 우리가 원하는 왼쪽.

여기에 (그리고 더 일반적으로 이와 같은 문제에 대한) 해결책은 모바일에 숨겨진 해킹 태그를 추가하여 태블릿 +에 존재하여 캡션을 밀어 내고 음수 여백으로 덮여있는 것입니다.

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][4 hack    ]
[5 caption][6 desc ^^^]
[         ][          ]

http://jsfiddle.net/b9chris/52VtD/16633/

HTML :

<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>

CSS :

#hack { height: 50px; }

@media (min-width: @screen-sm) {
    #desc { margin-top: -50px; }
}

따라서 여기서 일반적인 솔루션은 모바일에서 사라질 수있는 해킹 태그를 추가하는 것입니다. tablet +에서 해킹 태그를 사용하면 표시된 태그가 흐름의 초기 또는 이후에 나타나고 위 또는 아래로 당겨 해킹 태그를 덮을 수 있습니다.

참고 : 링크 된 jsfiddle에서 간단한 예제를 위해 고정 높이를 사용했지만 실제 작업 한 사이트 콘텐츠의 높이는 5 가지 태그 모두에서 다릅니다. 태그 높이, 특히 이미지 및 디스크의 상대적으로 큰 차이로 올바르게 렌더링됩니다.

참고 2 : 레이아웃에 따라 tablet + (또는 더 큰 해상도)에서 일관된 충분한 열 순서를 가질 수 margin-bottom있으므로 다음과 같이 대신 해킹 태그를 사용 하지 않아도됩니다.

참고 3 : 이것은 부트 스트랩 3을 사용합니다. 부트 스트랩 4는 다른 그리드 세트를 사용하므로이 예제에서는 작동하지 않습니다.

http://jsfiddle.net/b9chris/52VtD/16632/

2017 년 10 월

다른 Bootstrap 4 솔루션을 추가하고 싶습니다. 나를 위해 일한 것.

미디어 쿼리와 결합 된 CSS "주문"속성을 사용하면 열이 작은 화면에 쌓일 때 열 순서를 바꿀 수 있습니다.

이 같은:

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

코드 펜 링크 : https://codepen.io/preston206/pen/EwrXqm

화면 크기를 조정하면 열이 다른 순서로 쌓이는 것을 볼 수 있습니다.

나는 이것을 원래 포스터의 질문과 묶을 것입니다. CSS를 사용하면 탐색 모음, 사이드 바 및 내용을 대상으로 지정한 다음 미디어 쿼리 내에 속성을 적용 할 수 있습니다.

에서 부트 스트랩 4 , 당신은 이런 식으로 뭔가를 수행하려는 경우 :

    Mobile  |   Desktop
-----------------------------
    A       |       A
    C       |   B       C
    B       |       D
    D       |

B 의 순서를 반대로 한 다음 C 를 적용한 다음 B에 적용해야 order-{breakpoint}-first합니다 . 그리고 두 개의 다른 설정을 적용하십시오. 하나는 동일한 열을 공유하고 다른 하나는 12 열의 전체 너비를 갖습니다.

• 작은 화면 : 12 열은 B , 12 열은 C

• 더 큰 화면 : 합계 사이에 12 열 ( B + C = 12)

이렇게

<div class='row no-gutters'>
    <div class='col-12'>
        A
    </div>
    <div class='col-12'>
        <div class='row no-gutters'>
            <div class='col-12 col-md-6'>
                C
            </div>
            <div class='col-12 col-md-6 order-md-first'>
                B
            </div>
        </div>
    </div>
    <div class='col-12'>
        D
    </div>
</div>

데모 : https://codepen.io/anon/pen/wXLGKa

insertAfter () 또는 insertBefore ()를 사용하여 jQuery를 사용하면 매우 쉽습니다.

<div class="left">content</div> <div class="right">sidebar</div>

<script>
$('.right').insertBefore('left');
</script>

그 간단한

모바일 장치에 대해 o 조건을 ​​설정하려면 다음과 같이 만들 수 있습니다

<script>
  var $iW = $(window).innerWidth();
  if ($iW < 992){
     $('.right').insertBefore('.left');
  }else{
     $('.right').insertAfter('.left');
  }
</script>

예 https://jsfiddle.net/w9n27k23/

모바일 버전부터 시작하여 대부분 원하는 시간을 달성 할 수 있습니다.

예를 들면 다음과 같습니다.

http://jsbin.com/wulexiq/edit?html,css,output

<div class="container">
      <h1>PUSH - PULL Bootstrap demo</h1>
    <h2>Version 1:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 col-sm-push-3 green">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 2:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 3:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 cyan">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
        IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW XS-SMALL SCREEN
      </div>

    </div>

    <h2>Version 4:</h2>
    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 beige">
        MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

  </div>