모바일 및 태블릿에서 열의 내용을 인접한 열로 분할하는 방법

bootstrap3을 사용 중이고 모바일 & 태블릿을 사용할 때 한 열에서 다른 열로 콘텐츠를 이동하려고합니다. 나는 더 나은 모바일 경험을 위해 특별히 인접한 열의 머리글/이미지 아래에 나머지는 맨 아래에 놓기 때문에 다른 열 안에 배치해야합니다. 페이지가 완전히 코딩되어 있으며 모바일 환경을 개선하려고합니다.모바일 및 태블릿에서 열의 내용을 인접한 열로 분할하는 방법

첨부 된 이미지는 시각적으로 무엇을 달성하려고하는지 설명해야합니다. 링크 : Visual look

나의 현재 계획은 모바일 & 태블릿에 원래 열을 숨기 동안의 중복 콘텐츠 만 이동 & 태블릿 뷰를 보여주는 것입니다. 나는 이것이 너무 무거워지기 시작할 것인지, 특히 휴대 전화에 대해 궁금한가요? (@media를 사용하는 경우에도 모든 컨텐츠가 여전히로드된다는 것을 이해하고 있습니다.)

정확하게 접근하고 있습니까?

이미지 당 Col-1과 Col-2는 기술적으로 "col"이 아니지만 더 큰 화면에 있습니다. 이것은 모바일 용으로 고치려고하는 그림의 오른쪽 두 열에 대한 기본 구조입니다.

<div class="row"> 

    <div class=col-md-8> 
    All of the content from col-3 as per image 
    </div> 

    <div class="col-md-4> 
    All of the content from col-4 as per the image 
    </div> 

</div>

출처

2014-05-24 user3670720

올바른 접근 방법이 될 수 있습니다,하지만 당신은 당신의 코드를 공유하는 경우 더 잘 알 수 있습니다. –

헤이 숀, 나는 그것을 recode하거나 디자인과 레이아웃을 변경하지 않고도 유일한 옵션이라고 생각합니다. 아마 코드를 다시 작성하고 전체 페이지에 대해 별도의 행을 가질 수는 있지만 이해가되지 않으며 시간이 너무 오래 걸립니다. – user3670720

예. hidden-xs는 간단하고 작동합니다. 그것은 내 문제를 해결 여기 : http://stackoverflow.com/questions/23718339/change-order-of-divs-with-push-pull-column-in-bootstrap –

화면 크기에 따라 다른 동작을 부여하려면 여러 클래스를 추가하십시오.

grid section of Bootstrap 3 도움 자세한 내용을 제공하지만, 귀하의 경우 :

<div class="row"> 

    <div class="col-md-8 col-sm-12"> 
    All of the content from col-3 as per image 
    </div> 

    <div class="col-md-4 col-sm-12"> 
    All of the content from col-4 as per the image 
    </div> 

</div>

출처

2014-05-24 03:46:11

답장을 보내 주셔서 감사합니다. 죄송합니다. 예를 들어 언급 한대로 축소되었습니다. 나는 그저 기본 구조를 예제로 넣었습니다. 기본적으로 콘텐츠를 한 열에서 다음 열로 이동하는 유일한 방법은 중복 콘텐츠가있는 @media입니다. 기본적으로 마지막 열을 별도의 섹션으로 나누어 다른 위치의 다른 열로 옮깁니다. – user3670720

모바일 및 태블릿에서 열의 내용을 인접한 열로 분할하는 방법

답변

관련 문제