3 열에서 오른쪽으로 당기기, 왼쪽으로 당기기로 부트 스트랩 변경 div 순서

3 열에서 오른쪽으로 당기기, 왼쪽으로 당기기로 부트 스트랩 변경 div 순서

---

나는 하루 종일이 작업을 해왔지만 해결책을 찾지 못했습니다. 컨테이너의 한 행에 3 개의 열이 있습니다.

1 : 오른쪽 콘텐츠 – 오른쪽으로 당기기

2 : 탐색 – 왼쪽으로 당기기

3 : 주요 내용

큰 화면에서 보이는 것 :

------------------------------------------------
|   Menu  |      Content      |  Right Content |
------------------------------------------------

작은 화면에서 어떻게 보일까요?

----------------------------
|  Menu  |  Right Content  |
|        |------------------
|        |  Content        |
----------------------------

현재 모습 :

------------------
| Right Content  |
------------------
| Menu | Content |
------------------

단순한 부동 문제라고 생각합니다. 하지만 거의 모든 가능성을 시도했습니다.

---

부트 스트랩 3

Bootstrap 3의 그리드 시스템 사용 :

<div class="container">
  <div class="row">
    <div class="col-xs-4">Menu</div>
    <div class="col-xs-8">
      <div class="row">
        <div class="col-md-4 col-md-push-8">Right Content</div>
        <div class="col-md-8 col-md-pull-4">Content</div>
      </div>
    </div>
  </div>
</div>

작동 예 : http://bootply.com/93614

설명

먼저 화면 해상도 ( col-xs-*)에 관계없이 제자리에 유지되는 두 개의 열을 설정 합니다.

다음으로, 더 큰 오른쪽 열을 두 개의 열로 나눕니다.이 열은 태블릿 크기의 장치에서 서로 겹쳐지고 아래로 축소됩니다 ( col-md-*).

마지막으로 일치하는 클래스 ( col-md-[push|pull]-*)를 사용하여 표시 순서를 이동합니다 . 첫 번째 열을 두 번째 양만큼 밀고 두 번째 열을 첫 번째 양만큼 당깁니다.

---

이 시도...

<div class="row">
    <div class="col-xs-3">
        Menu
    </div>
    <div class="col-xs-9">
        <div class="row">
          <div class="col-sm-4 col-sm-push-8">
          Right content
          </div>
          <div class="col-sm-8 col-sm-pull-4">
          Content
          </div>
       </div>
    </div>
</div>

Bootply

참조 URL : https://stackoverflow.com/questions/19929213/bootstrap-change-div-order-with-pull-right-pull-left-on-3-columns