모바일 레이아웃에서 부트스트랩 3 열 순서를 변경하려면 어떻게 해야 합니까?

모바일 레이아웃에서 부트스트랩 3 열 순서를 변경하려면 어떻게 해야 합니까?

상단에 고정된 네비게이션 바로 반응형 레이아웃을 만들고 있습니다.아래에는 사이드바용 열(3)과 내용용 열(9) 두 개가 있습니다.바탕 화면에서 다음과 같은 모양

navbar
[3][9]

내가 할 때resize바로일을 navbar에 쌓입니다.

navbar
[3]
[9]

저는 메인 콘텐츠를 상단에 두고 싶기 때문에 모바일 주문을 다음과 같이 변경해야 합니다.

navbar
[9]
[3]

저는 같은 점을 다루는 이 기사를 찾았지만, 수락된 답변은 현재 버전의 부트스트랩에 솔루션 no가 적용된다고 편집되었습니다.

모바일에서 이 열을 다시 정렬하려면 어떻게 해야 합니까?또는 sidbar list-group을 확장 중인 navbar로 가져오려면 어떻게 해야 합니까?

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<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년

부트스트랩 3을 기반으로 한 원래 질문에 대한 해결책은 푸시풀을 사용하는 것이었습니다.

부트스트랩 4에서는 이제 부트스트랩 4 플렉스박스 덕분에 열이 수직으로 전체 너비로 쌓였을 때도 순서를 변경할 수 있습니다.OFC, 푸시 풀 방식은 여전히 작동하지만, 이제 부트스트랩 4에서 열 순서를 변경하는 다른 방법이 있어 전체 너비 열을 다시 주문할 수 있습니다.

1 - 방 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 - 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 답변

부트스트랩 3에 기반한 원래 질문의 경우, 해결책은 더 큰 폭에 푸시풀을 사용하는 것이었고, 그러면 열은 더 작은 (xs) 폭에 대한 자연스러운 순서를 보여줄 것입니다. (A-B는 B-A의 역방향입니다.)

<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에서.

부트스트랩 3 응답

여기서 답은 2개의 셀에 대해서만 작동하지만 열에 더 많은 내용이 포함되면 더 복잡해질 수 있습니다.여러 열에 있는 임의의 수의 셀에 대한 일반화된 솔루션을 찾은 것 같습니다.

목표들

모바일에서 수직 태그 시퀀스를 가져와 태블릿/데스크톱에서 디자인이 요구하는 순서에 따라 정렬할 수 있습니다.이 구체적인 예에서 한 태그는 일반적인 경우보다 일찍 흐름에 들어가야 하고 다른 태그는 일반적인 경우보다 나중에 흐름에 들어가야 합니다.

모바일.

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

태블릿+

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

따라서 표제는 태블릿+에서 바로 섞여야 하며, 기술적으로는 모바일에서 표제 앞에 있는 캡션 태그 위에 놓입니다.잠시 후에 4개의 캡션도 문제가 있다는 것을 알게 될 것입니다.

모든 셀이 높이가 다를 수 있으며 다음 셀과 함께 위에서 아래로 플러시해야 한다고 가정합니다(테이블과 같은 약한 트릭 제외).

모든 부트스트랩 그리드 문제와 마찬가지로 1단계는 HTML이 페이지에서 모바일 순서로 1 2 3 4 5여야 한다는 것을 인식하는 것입니다.그런 다음 Javascript 없이 태블릿/데스크톱을 이러한 방식으로 다시 주문할 수 있는 방법을 결정합니다.

얻을 수 있는 솔루션1 headline그리고.3 qty 둘 다 입니다.pull-right은 CSS CSS 적됩니다에 됩니다.float: right오른쪽에 맞는 첫 번째 열린 공간을 찾는다는 뜻입니다.당신은 브라우저의 CSS 프로세서가 다음 순서로 작동한다고 생각할 수 있습니다: 1은 오른쪽 상단 모서리에 맞습니다.2는 다음이고 규칙적입니다(float: left로 갑니다.), 왼쪽상모로이동니다합리서단▁),다니이동. 3,즉 그면러 3, 즉즉.float: right그래서 그것은 1 아래로 뛰어 넘습니다.

이 으로는 충분하지 않았습니다.4 caption의 세포가 짧기 입니다.2 image왼쪽은 둘을 합친 것보다 더 긴 경향이 있습니다.부트스트랩 그리드는 미화된 플로트 해킹으로, 의미는4 caption이라float: left.와 함께2 image를 너무 왼에있공너많무이있차고고지하간을쪽는▁on▁occupying,.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; }
}

그래서 여기서 일반화된 해결책은 모바일에서 사라질 수 있는 해킹 태그를 추가하는 것입니다.태블릿+에서 해킹 태그는 표시된 태그가 흐름의 초기 또는 후반에 나타날 수 있도록 한 다음, 해당 해킹 태그를 덮기 위해 위 또는 아래로 당겨집니다.

참고: 링크된 jsfiddle의 간단한 예제를 위해 고정 높이를 사용했지만, 실제 작업 중인 사이트 콘텐츠는 5개 태그 모두에서 높이가 다릅니다.태그 높이, 특히 이미지와 설명에서 비교적 큰 차이로 적절하게 렌더링됩니다.

참고 2: 레이아웃에 따라 태블릿+(또는 더 큰 해상도)에 대한 열 순서가 일정할 수 있으므로 해킹 태그의 사용을 피할 수 있습니다.margin-bottom대신에, 이렇게:

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

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

2017년 10월

다른 부트스트랩 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를 적용해야 합니다.order-{breakpoint}-first두 가지 설정을 적용합니다. 하나는 동일한 색상을 공유하도록 하고 다른 하나는 12개 색상의 전체 너비를 사용하도록 합니다.

• 작은 화면: 12 col-to-B 및 12 col-to-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

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

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

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>

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

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

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

모바일 장치의 조건을 설정하려면 다음과 같이 설정할 수 있습니다.

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

예제 https://jsfiddle.net/w9n27k23/

모바일에서 보고 싶은 방식으로 HTML을 작성하는 것은 매우 간단합니다.그런 다음 부트스트랩 순서 클래스를 사용하여 데스크톱에서 보기를 원하는 방식으로 정렬할 수 있습니다.

<html>
<head>
 <title>Order View</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="row">
  <div class="col order-md-2">
    <h1>IMAGE</h1>
  </div>
  <div class="col order-md-1">
    <h1>TEXT</h1>
  </div>
</body>
</html>

언급URL : https://stackoverflow.com/questions/20171408/how-do-i-change-bootstrap-3-column-order-on-mobile-layout